4.4CSS 方案 (CSS Modules, Styled Components, etc)

文档摘要

4.4CSS 方案 (CSS Modules, Styled Components, CSS-in-JS) React 中的 CSS 方案：CSS Modules, Styled Components, CSS-in-JS 详解 4.4.1 CSS Modules CSS Modules 是一种将 CSS 文件模块化的方案，它通过在构建过程中自动生成唯一的 CSS 类名，从而避免全局命名冲突。每个 CSS Module 文件都被视为一个模块，其中的类名只在当前模块内有效。原理： CSS Modules 的核心思想是在构建时对 CSS 类名进行转换，将原本的类名加上一个 hash 值，使其具有唯一性。例如，一个名为的类名可能会被转换为。

4.4CSS 方案 (CSS Modules, Styled Components, CSS-in-JS)

React 中的 CSS 方案：CSS Modules, Styled Components, CSS-in-JS 详解

4.4.1 CSS Modules

CSS Modules 是一种将 CSS 文件模块化的方案，它通过在构建过程中自动生成唯一的 CSS 类名，从而避免全局命名冲突。每个 CSS Module 文件都被视为一个模块，其中的类名只在当前模块内有效。

原理：

CSS Modules 的核心思想是在构建时对 CSS 类名进行转换，将原本的类名加上一个 hash 值，使其具有唯一性。例如，一个名为 button 的类名可能会被转换为 button__12345。这样，即使不同的组件使用了相同的类名，由于它们最终生成的类名不同，也不会发生冲突。

代码实践：

安装：

通常，你需要使用 Webpack 或类似的构建工具来支持 CSS Modules。确保你的构建配置中包含了处理 CSS Modules 的 loader，例如 style-loader 和 css-loader。
```
npm install style-loader css-loader --save-dev
```

配置 Webpack：

在 webpack.config.js 文件中，添加或修改 css-loader 的配置，启用 CSS Modules。


module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.module\.css$/, // 匹配以 .module.css 结尾的文件
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]--[hash:base64:5]', // 配置类名生成规则
              },
              importLoaders: 1, // 允许 CSS Modules 导入其他 CSS 文件
            },
          },
        ],
      },
    ],
  },
};

编写 CSS Module 文件：

创建一个以 .module.css 结尾的 CSS 文件，例如 Button.module.css。


/* Button.module.css */
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}
.primary {
  background-color: #008CBA;
}
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

在 React 组件中使用：

在 React 组件中，导入 CSS Module 文件，并通过 styles 对象访问其中的类名。


import React from 'react';
import styles from './Button.module.css'; // 导入 CSS Module 文件
function Button({ children, primary, disabled }) {
  let buttonClasses = [styles.button]; // 初始化类名数组
  if (primary) {
    buttonClasses.push(styles.primary); // 添加 primary 类名
  }
  if (disabled) {
    buttonClasses.push(styles.disabled); // 添加 disabled 类名
  }
  return (
    <button className={buttonClasses.join(' ')} disabled={disabled}>
      {children}
    </button>
  );
}
export default Button;

优点：

避免命名冲突： 通过自动生成唯一的类名，有效避免了全局命名冲突。
局部作用域： 每个 CSS Module 文件都有自己的作用域，类名只在当前模块内有效。
易于维护： CSS 代码与组件紧密结合，方便维护和重构。
兼容性好： 可以与现有的 CSS 工具和技术集成。

缺点：

需要构建工具支持： 需要使用 Webpack 或类似的构建工具来处理 CSS Modules。
类名书写稍显繁琐： 需要通过 styles 对象访问类名。
动态样式处理相对复杂： 处理动态样式时，需要手动拼接类名或使用第三方库。

Graph TD 图示：

4.4.2 Styled Components

Styled Components 是一种 CSS-in-JS 方案，它允许你在 JavaScript 代码中编写 CSS，并将样式与 React 组件紧密绑定。Styled Components 使用 CSS 预处理器（例如 Sass 或 Less）的语法，并支持动态样式和主题化。

原理：

Styled Components 的核心思想是使用模板字符串（Tagged Templates）来定义 CSS 样式，并将其与 React 组件关联。当你创建一个 Styled Component 时，Styled Components 会自动生成一个唯一的 CSS 类名，并将样式注入到 DOM 中。

代码实践：

安装：


npm install styled-components --save

创建 Styled Component：

使用 styled 对象创建一个 Styled Component。


import styled from 'styled-components';
const Button = styled.button`
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  &:hover {
    opacity: 0.8;
  }
  ${props => props.primary && `
    background-color: #008CBA;
  `}
  ${props => props.disabled && `
    opacity: 0.5;
    cursor: not-allowed;
  `}
`;
export default Button;

在 React 组件中使用：

直接使用 Styled Component 作为 React 组件。


import React from 'react';
import Button from './Button';
function MyComponent() {
  return (
    <div>
      <Button>Default Button</Button>
      <Button primary>Primary Button</Button>
      <Button disabled>Disabled Button</Button>
    </div>
  );
}
export default MyComponent;

优点：

组件化： 样式与组件紧密结合，提高了代码的可维护性和可重用性。
动态样式： 可以根据 props 动态生成样式，方便实现主题化和响应式设计。
避免命名冲突： 自动生成唯一的类名，避免了全局命名冲突。
易于使用： 使用 CSS 预处理器的语法，学习成本低。
自动注入样式： Styled Components 会自动将样式注入到 DOM 中，无需手动管理。

缺点：

运行时开销： Styled Components 在运行时生成 CSS，可能会带来一定的性能开销。
学习曲线： 需要学习 Styled Components 的 API 和语法。
调试困难： 在调试时，需要查看 Styled Components 生成的 CSS 类名。
增加了 JavaScript 包的大小： 因为样式定义在 JavaScript 中，会增加 JavaScript 包的大小。

Graph TD 图示：

4.4.3 CSS-in-JS

CSS-in-JS 是一种更广泛的概念，它指的是将 CSS 样式编写在 JavaScript 代码中的各种技术和库。Styled Components 只是 CSS-in-JS 的一种实现方式。除了 Styled Components，还有许多其他的 CSS-in-JS 库，例如 Emotion、JSS 和 Aphrodite。

原理：

CSS-in-JS 的核心思想是将 CSS 样式作为 JavaScript 对象或函数进行定义，并使用 JavaScript 代码将其注入到 DOM 中。不同的 CSS-in-JS 库使用不同的技术和 API 来实现这一目标。

代码实践（以 Emotion 为例）：

安装：


npm install @emotion/react @emotion/styled --save

使用 Emotion 创建样式：


import React from 'react';
import styled from '@emotion/styled';
import { css } from '@emotion/react';
const Button = styled.button`
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  &:hover {
    opacity: 0.8;
  }
  ${props => props.primary && css`
    background-color: #008CBA;
  `}
  ${props => props.disabled && css`
    opacity: 0.5;
    cursor: not-allowed;
  `}
`;
export default Button;

在 React 组件中使用：


import React from 'react';
import Button from './Button';
function MyComponent() {
  return (
    <div>
      <Button>Default Button</Button>
      <Button primary>Primary Button</Button>
      <Button disabled>Disabled Button</Button>
    </div>
  );
}
export default MyComponent;

优点：

动态样式： 能够方便地根据组件的 props 或状态动态生成样式。
避免命名冲突： 大多数 CSS-in-JS 库都会自动生成唯一的类名，避免全局命名冲突。
组件化： 样式与组件紧密结合，提高了代码的可维护性和可重用性。
强大的主题化支持： 许多 CSS-in-JS 库都提供了强大的主题化支持，方便实现应用的主题切换。

缺点：

运行时开销： CSS-in-JS 在运行时生成 CSS，可能会带来一定的性能开销。
学习曲线： 需要学习 CSS-in-JS 库的 API 和语法。
调试困难： 在调试时，需要查看 CSS-in-JS 库生成的 CSS 类名。
增加了 JavaScript 包的大小： 因为样式定义在 JavaScript 中，会增加 JavaScript 包的大小。

选择 CSS 方案的考虑因素：

在选择 CSS 方案时，需要考虑以下因素：

项目规模： 对于小型项目，CSS Modules 可能是一个不错的选择。对于大型项目，Styled Components 或 CSS-in-JS 可能更适合。
团队经验： 选择团队成员熟悉的 CSS 方案可以提高开发效率。
性能要求： 如果对性能要求较高，需要仔细评估 CSS-in-JS 的运行时开销。
可维护性： 选择易于维护和重构的 CSS 方案可以降低维护成本。
主题化需求： 如果需要支持主题化，Styled Components 或 CSS-in-JS 可能更适合。

总结：

CSS Modules、Styled Components 和 CSS-in-JS 都是优秀的 React CSS 解决方案，它们各有优缺点。选择哪种方案取决于具体的项目需求和团队偏好。希望本文能够帮助你更好地理解这些方案，并在 React 开发中做出明智的选择。

作者与出处

原作者：灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/217-react%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A0%B8%E5%BF%83%E6%8A%80%E6%9C%AF%E4%B8%8E%E5%AE%9E%E6%88%98

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流