Quick How-to: Use the emotion `css` prop with create-react-app in 2021
1 min readJun 2, 2019
I’ve heard a few people have had trouble getting emotion’s css
prop to work with create-react-app
, so here’s how to do it:
- Install:
create-react-app example
cd example
yarn add @emotion/core react-app-rewired customize-cra --save
yarn add @emotion/babel-preset-css-prop --dev
Replace scripts in package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
Create config-overrides.js
in your project root
const { override, addBabelPreset } = require('customize-cra')module.exports = override(
addBabelPreset('@emotion/babel-preset-css-prop')
)
That’s it! You should now be able to style things with the css
prop:
import React from 'react'
import { css } from '@emotion/react'const Example = () => <div css={css`width: 100%`}>Example</div>
Here is a codesandbox example that you can reference: https://codesandbox.io/s/cocky-mclaren-tplgs
Keep in mind it won’t work because codesandbox isn’t running the scripts, but should still be a good reference.