Emotion

Emotion是一个与Styled Components十分类似的CSS-in-JS库，它提供了比较强大的可预测样式组合，并且同时支持类似于Styled Components采用的字符串的样式定义和基于对象的样式定义。Emotion有三种使用方法，一种是框架无关的用法，一种是与React搭配使用的用法，最后一种则是与Styled Components相同的用法。这两种用法所需要安装的依赖包是不同的。

框架无关的使用方式主要是依赖css``字符串模版标签来生成样式类名称，采用这种写法的时候，需要安装以下依赖。

npm install @emotion/css
yarn add @emotion/css

这样在项目中就可以以以下的方式来使用了。

import { css, cx } from '@emotion/css';

function App() {
  const color = '#c8c8c8';

  return (
    <div
      className={css`
        padding: 32px;
        &:hover {
          color: ${color};
        }
      `}>
      Some text.
    </div>
  );
}

而使用与React固定搭配的方式则需要安装以下依赖。

npm install @emotion/react
yarn add @emotion/react

这时就可以在组件中使用css属性来设定样式了。

/** @jsx jsx */
import { css, jsx } from '@emotion/react';

function App() {
  const color = '#c8c8c8';

  return (
    <div
      css={css`
        padding: 32px;
        &:hover {
          color: ${color};
        }
      `}>
      Some text.
    </div>
  );
}

Warning

在以上两种用法中，虽然引入的cx和jsx都没有被使用，但是在进行样式拼合的时候是会需要到他们的。其中cx可以拼合所有用到的样式类名，例如className={cx(css``, 'logo')}。而jsx则是用于提供jsx babel plugin指定JSX文件的解析方式，这样jsx函数就会替代React.createElement方法使css属性生效了。

如果使用Styled Components的样式组件方式定义样式，那么就需要安装以下依赖库。

npm install @emotion/styled @emotion/react
yarn add @emotion/styled @emotion/react

这时，上面的示例就可以改为以下这种书写方式了。

import styled from '@emotion/styled';

const Container = styled.div`
  padding: 32px;
  &:hover {
    color: '#c8c8c8';
  }
`;

function App() {
  return <Container>Some text.</Container>;
}

在这种用法下，Emotion的使用方法与Styled Components完全相同。

Live with React

Emotion