React Emotion CSS 创作实践

2023-09-15 15:12:40

在 React 中编写 css 一直是让我头疼的一件事，我尝试过以下几种方式。

scss 全局样式，依靠命名避免样式冲突。学习成本低，写起来也很方便。但是随着项目的增大，样式冲突会越来越多，维护起来很麻烦。
使用 css modules。css modules 可以很好的解决样式冲突的问题，但是它的学习成本比较高，而且写起来也比较麻烦。
使用 emotion。emotion 是一款轻量级的 css-in-js 库，学习成本低，写起来也很方便，而且它还可以很好的解决样式冲突的问题。

下面我将详细介绍如何使用 emotion 来组织清晰的 css 代码。

1. 安装 emotion

npm install emotion --save

2. 创建一个 emotion 样式文件

// emotion.js
import { createGlobalStyle } from "emotion";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
`;

export default GlobalStyle;

3. 在你的 React 组件中导入 emotion 样式文件

// App.js
import GlobalStyle from "./emotion.js";

const App = () => {
  return (
    <>
      <GlobalStyle />
      <div>Hello world!</div>
    </>
  );
};

export default App;

4. 使用 emotion 来编写 css

// App.js
import GlobalStyle from "./emotion.js";
import styled from "@emotion/styled";

const StyledDiv = styled.div`
  color: red;
  font-size: 20px;
`;

const App = () => {
  return (
    <>
      <GlobalStyle />
      <StyledDiv>Hello world!</StyledDiv>
    </>
  );
};

export default App;