npm install @emotion/core

概述

@emotion/core 是一个用于编写 React 应用的 CSS-in-JS 库。它提供了一些帮助程序员编写 CSS 的工具，例如将 CSS 嵌入 JavaScript 代码中，使用模板字符串来编写 CSS，自动生成类名等。

安装

@emotion/core 可以使用 npm 进行安装。在终端中进入项目根目录，然后输入以下命令：

npm install @emotion/core

使用

使用 @emotion/core 编写 CSS 可以有多种方式。下面是其中的一种方式：

1. 在文件的顶部导入 @emotion/core：

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

2. 编写 CSS 样式：

const styles = css`
  color: #333;
  font-size: 16px;

  &:hover {
    color: red;
  }
`;

3. 将样式应用于组件：

const MyComponent = props => {
  return (
    <div css={styles}>
      This is a styled component
    </div>
  );
}

这样，就可以使用 @emotion/core 来编写样式并将其应用于组件了。

总结

@emotion/core 是一个功能强大的 CSS-in-JS 库，它可以帮助编写更具可读性的代码、避免命名冲突等问题，其使用也非常简单，只需要几步即可完成 CSS 样式的编写和应用。