How to add styled-components to a React application

I've talked about the advantages of CSS-in-JS and styled-components in a previous article you can find here.
A few days ago I had to set up it from scratch again and hated doing it. It does require quite a few actions to leverage the full advantages it can offer so let's see all the steps required.

Install emotion

I prefer emotionjs between the CSS-in-JS libraries. It works very well with TypeScript and has an easy syntax.

$ npm i @emotion/core @emotion/styled 

will add the basic packages. @emotion/core is required, @emotion/styled only if you want styled-components. I favor the latter but sometimes use core for either some small styling with css or keyframes.

The vscode styled-components extension for syntax highlight and IntelliSense is a must.

Setting up .babelrc

Babel requires a plugin to parse emotion.
The default setup requires installing babel-plugin-emotion but it does not include the css prop. @emotion/babel-preset-css-prop does and includes the default plugin.

// the css prop const Button: React.FC<IProps> = props => ( <a css={{ color: 'hotpink', '&:hover': { color: 'darkorchid' } }} {...props} /> ) 

$ npm i -D @emotion/babel-preset-css-prop 

will install it.

The emotion plugin needs to appear after @babel/preset-react and @babel/preset-typescript in the list of plugins in case you are using them (you should!).

// recommended .babelrc config for emotionjs { "env": { "production": { "presets": [ "@babel/react", "@babel/typescript", "@emotion/babel-preset-css-prop" ] }, "development": { "presets": [ "@babel/react", "@babel/typescript", ["@emotion/babel-preset-css-prop", { "sourceMap": true }] ] } } } 

Linting with style

Stylelint adds rules and checks for styled-components libraries. Since emotionjs is based on styled-components, the linting is fully compatible. It is also enabled by default.

$ npm i -D stylelint stylelint-config-standard 

You can set up custom rules as well, declaration-empty-line-before is for prettier compatibility.

// .stylelintrc { "extends": [ "stylelint-config-standard" ], "rules": { "declaration-empty-line-before": null, } } 

Install the vscode extension to enable default detection on vscode.

Closing thoughts

Setting up new libraries can be a chore, especially when the documentation is spread in different places.
The advantages of using styled-components outweigh the initial set up chore. But it doesn't mean it has to be a time-consuming activity.