Я слышал, что некоторым людям было сложно заставить css
опору эмоций работать с create-react-app
, поэтому вот как это сделать:
- Установить:
create-react-app example
cd example
yarn add @emotion/core react-app-rewired customize-cra --save
yarn add @emotion/babel-preset-css-prop --dev
Заменить скрипты в package.json
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject" }
Создайте config-overrides.js
в корне вашего проекта
const { override, addBabelPreset } = require('customize-cra')
module.exports = override(
addBabelPreset('@emotion/babel-preset-css-prop')
)
Вот и все! Теперь у вас должна быть возможность стилизовать вещи с помощью опоры css
:
import React from 'react' import { css } from '@emotion/react' const Example = () => <div css={css`width: 100%`}>Example</div>
Вот пример codeandbox, на который вы можете ссылаться: https://codesandbox.io/s/cocky-mclaren-tplgs
Имейте в виду, что это не сработает, потому что codeandbox не запускает скрипты, но все же должен быть хорошим справочником.