What is this?
Emotion is a performant and flexible CSS-in-JS library for JavaScript: you write styles in your JS code instead of separate CSS files. It is one of the most popular libraries in this space.
Emotion is a performant and flexible CSS-in-JS library for JavaScript: you write styles in your JS code instead of separate CSS files. It is one of the most popular libraries in this space.Is this React-only, or does it work with other frameworks?It is a general JavaScript library that is best known in the React ecosystem, but the ecosystem includes adapters for Vue, Nuxt and Ember as well.
It is a general JavaScript library that is best known in the React ecosystem, but the ecosystem includes adapters for Vue, Nuxt and Ember as well.How do I add it to a project?Install the package from npm or yarn (e.g. npm install @emotion/react). Per the Quick Start you are up and running with a single import; the docs' Install page has the details.
Install the package from npm or yarn (e.g. npm install @emotion/react). Per the Quick Start you are up and running with a single import; the docs' Install page has the details.Do I need to set up the Babel plugin for it to work?No, the Babel plugin is optional. It is not required, but it enables some optimizations and customizations, and the docs have a feature table showing exactly what you gain with it.
No, the Babel plugin is optional. It is not required, but it enables some optimizations and customizations, and the docs have a feature table showing exactly what you gain with it.Why would I use this instead of plain CSS files?Styles compose predictably so you avoid CSS specificity issues, you get source maps and labels for debugging, and production builds use heavy caching for performance.
Styles compose predictably so you avoid CSS specificity issues, you get source maps and labels for debugging, and production builds use heavy caching for performance.Is it production-ready, or more of an experiment?Very battle-tested: the 'In the Wild' section lists production sites like The New York Times, Sentry, Codecademy, Postmates and Apache Superset, plus component libraries built on it.
Very battle-tested: the 'In the Wild' section lists production sites like The New York Times, Sentry, Codecademy, Postmates and Apache Superset, plus component libraries built on it.Does it work outside the browser, like in React Native apps?Yes, there is Emotion Native support in the ecosystem, including emotion-native-extended for better styling with React Native Extended Stylesheet.
Yes, there is Emotion Native support in the ecosystem, including emotion-native-extended for better styling with React Native Extended Stylesheet.How do I actually write styles with it?You can use string or object styles via the css prop or the styled API. Composition, nested selectors and media queries are all supported and documented.
You can use string or object styles via the css prop or the styled API. Composition, nested selectors and media queries are all supported and documented.Can I try it without installing anything?Yes, the README links a live CodeSandbox demo, so you can play with Emotion in the browser before adding it to a project.
Yes, the README links a live CodeSandbox demo, so you can play with Emotion in the browser before adding it to a project.Is there tooling around it, like linting?Yes, there is a stylelint integration in the ecosystem, plus helpers like facepaint and css-in-js-media for responsive design and polished for Sass-style mixins in JS.
Yes, there is a stylelint integration in the ecosystem, plus helpers like facepaint and css-in-js-media for responsive design and polished for Sass-style mixins in JS.What are similar projects?stylex, chakra-ui, inferno, styled-components, react-native-web, formatjs, tamagui, velocity
stylex, chakra-ui, inferno, styled-components, react-native-web, formatjs, tamagui, velocityWhich topics is it in?css-in-js, styling, babel, reactjs, monorepo, javascript-library, css, ui, web-development, performance, react, npm
css-in-js, styling, babel, reactjs, monorepo, javascript-library, css, ui, web-development, performance, react, npm