React 中如何使用 CSS Modules 编写 CSS？

推荐答案

在 React 中使用 CSS Modules 编写 CSS 的步骤如下：

1. 创建 CSS 文件：创建一个 .module.css 文件，例如 styles.module.css。

   // www.javascriptcn.com code example
   /* styles.module.css */
   .container {
     padding: 20px;
     background-color: #f0f0f0;
   }
   
   .title {
     font-size: 24px;
     color: #333;
   }

2. 在 React 组件中引入 CSS Modules：在 React 组件中通过 import 引入 CSS Modules 文件，并使用 className 属性应用样式。

   // www.javascriptcn.com code example
   import React from 'react';
   import styles from './styles.module.css';
   
   const MyComponent = () => {
     return (
       <div className={styles.container}>
         <h1 className={styles.title}>Hello, CSS Modules!</h1>
       </div>
     );
   };
   
   export default MyComponent;

3. 编译和运行：确保你的项目配置支持 CSS Modules（例如使用 Create React App 或 Webpack 配置），然后编译并运行项目。

本题详细解读

什么是 CSS Modules？

CSS Modules 是一种 CSS 的模块化解决方案，它允许你在 React 组件中局部作用域的 CSS 样式。通过 CSS Modules，你可以避免全局样式污染，确保每个组件的样式是独立的。

如何使用 CSS Modules？

1. 文件命名：CSS Modules 文件通常以 .module.css 结尾，例如 styles.module.css。这种命名方式有助于构建工具（如 Webpack）识别并处理这些文件。

2. 引入样式：在 React 组件中，通过 import 语句引入 CSS Modules 文件。引入的样式对象包含了所有定义的类名，这些类名在编译时会被转换为唯一的哈希值，从而避免类名冲突。

3. 应用样式：在 JSX 中，使用 className 属性来应用样式。通过 styles.className 的方式引用具体的类名。

配置要求

• Create React App：如果你使用 Create React App 创建项目，默认支持 CSS Modules，无需额外配置。

• Webpack：如果你使用自定义 Webpack 配置，需要确保 css-loader 的 modules 选项启用。

  // www.javascriptcn.com code example
   {
     test: /\.css$/,
     use: [
       'style-loader',
       {
         loader: 'css-loader',
         options: {
           modules: true,
         },
       },
     ],
   }

优点

• 局部作用域：CSS Modules 确保样式只在当前组件中生效，避免了全局样式污染。
• 类名唯一性：通过哈希处理类名，确保类名唯一，避免冲突。
• 易于维护：样式与组件紧密耦合，便于维护和重构。

注意事项

• 动态类名：如果需要动态应用类名，可以使用模板字符串或条件语句。

  <div className={`${styles.container} ${isActive ? styles.active : ''}`}>
    Content
  </div>

• 全局样式：如果需要在 CSS Modules 中使用全局样式，可以使用 :global 选择器。

  :global(.global-class) {
    color: red;
  }

通过以上步骤和注意事项，你可以在 React 项目中有效地使用 CSS Modules 来编写和管理样式。