Quick How-to: Use the emotion `css` prop with create-react-app in 2021

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:

1. 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.