Create React App with styled-components Setup
- Create your React application using the latest version of Create React App: nothing new here!
npx create-react-app your-app-name
- Install babel-plugin-macros: this is what lets you easily install Babel plugins into zero-configuration projects like Create React App.
npm install babel-plugin-macros --save-dev
- Within your React component, import the styled-components Babel macro instead of “import styled”:
import styled from 'styled-components/macro';
- Confirm that the Babel plugin is working: Using your browser’s dev tools (no React dev tools extension needed), inspect your React component and check that you can see the component’s styled-component name and CSS classes, not just the CSS classes themselves. See the next section for screenshots.
Is it Working?
If the styled-components Babel plugin is working, you should see additional debugging info for every styled component that you create in your browser’s dev tools.
Kaitlin Moreno’s article, “Thinking in styled-components”, is a great overview of how to best leverage styled-components in React component development.