emotion README

The project's README from github.com/emotion-js/emotion. As one markdown file: README.md.

Emotion logo

emotion

The Next Generation of CSS-in-JS

Emotion 11 has been released 🚀 See the blog post

Backers on Open Collective Sponsors on Open Collective npm version Build Status codecov @emotion/css size @emotion/css gzip size @emotion/react size @emotion/react gzip size @emotion/styled size @emotion/styled gzip size slack

Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.

👀 Demo Sandbox

📖 Docs

Frequently viewed docs:

Quick Start

Get up and running with a single import.

npm install --save @emotion/react
/** @jsx jsx */
import { jsx } from '@emotion/react'

let SomeComponent = props => {
  return (
    <div
      css={{
        color: 'hotpink'
      }}
      {...props}
    />
  )
}

Do I Need To Use the Babel Plugin?

The babel plugin is not required, but enables some optimizations and customizations that could be beneficial for your project.

Look here 👉 emotion babel plugin feature table and documentation

Demo Sandbox

Demo Code Sandbox

Examples

Ecosystem

In the Wild

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Thinkmill

Backers

Thank you to all our backers! 🙏 [Become a backer]

Contributors

This project exists thanks to all the people who contribute. [Contribute].

emotion (emotion-js/emotion)

Searching Database…

这是做什么的?Emotion 是一个高性能、灵活的 JavaScript CSS-in-JS 库:你直接在 JS 代码里写样式,而不是写在单独的 CSS 文件里。它是这个领域最受欢迎的库之一。
它只能配合 React 使用,还是也支持其他框架?它是一个通用的 JavaScript 库,虽然在 React 生态里最有名,但生态中也有针对 Vue、Nuxt 和 Ember 的适配器。
怎么把它加到项目里?用 npm 或 yarn 安装这个包(例如 npm install @emotion/react)。按照快速上手指南,只需一次 import 就能跑起来;具体细节见文档的 Install 页面。
需要配置 Babel 插件才能用吗?不需要,Babel 插件是可选的。它不是必需的,但可以带来一些优化和自定义能力,文档里有一张功能对照表,清楚列出装了插件能多得到什么。
相比直接写普通 CSS 文件,用它有什么好处?样式可以可预测地组合,避免 CSS 优先级冲突的问题;调试时有 source map 和标签可用;生产构建还通过大量缓存来提升性能。
它适合正式上线用,还是更偏实验性?经过大量实战检验:'In the Wild' 页面列出了 The New York Times、Sentry、Codecademy、Postmates 和 Apache Superset 等生产环境网站,还有不少基于它构建的组件库。
它能在浏览器之外使用吗,比如 React Native 应用里?可以,生态中有 Emotion Native 支持,比如 emotion-native-extended,可以配合 React Native Extended Stylesheet 实现更灵活的样式。
具体该怎么用它写样式?可以通过 css prop 或 styled API 使用字符串或对象形式的样式。样式组合、嵌套选择器和媒体查询都支持,文档里都有说明。
不安装任何东西能先试用吗?可以,README 里链接了一个 CodeSandbox 在线演示,你可以在浏览器里先体验 Emotion,再决定是否加入项目。
围绕它有配套工具吗,比如代码检查?有,生态中有 stylelint 集成,还有一些辅助工具:做响应式设计的 facepaint 和 css-in-js-media,以及在 JS 里实现 Sass 风格 mixin 的 polished。
Creator
emotion-js
Size
24.9 MB
Stars
18K
Age
9y
Commits · 90 Days