Skip to main content

@emotion/react

emotion 是一个 JavaScript 库，使用 emotion 可以用写 js 的方式写 css 代码。在 react 中安装 emotion 后，可以很方便进行 css 的封装，复用。使用 emotion 后，浏览器渲染出来的标签是会加上一个 css 开头的标识。如下：截图中以 css-开头的几个标签，就是使用 emotion 库后渲染出来的。

Install​

yarn add @emotion/react

Quest Start​

/** @jsx jsx */
import { jsx, css, Global, ClassNames } from "@emotion/react";

render(
  <div css={{ color: "hotpink" }}>
    <div
      css={css`
        color: green;
      `}
    />
    <Global
      styles={{
        body: {
          margin: 0,
          padding: 0,
        },
      }}
    />
    <ClassNames>
      {({ css, cx }) => (
        <div
          className={cx(
            "some-class",
            css`
              color: yellow;
            `
          )}
        />
      )}
    </ClassNames>
  </div>
);

参考​