react中css样式模块化

在React中，可以使用CSS样式模块化来确保样式的封装和复用。一种常见的做法是使用CSS Modules。下面是一个简单的示例：

1. 安装依赖：

   npm install --save-dev css-loader style-loader

2. 创建一个CSS文件，例如 `styles.module.css`：

   .container {
     background-color: #f1f1f1;
     padding: 20px;
   }

   .title {
     font-size: 24px;
     color: #333;
   }

3. 在React组件中引入样式文件并使用：

   import React from 'react';
   import styles from './styles.module.css';

   const MyComponent = () => {
     return (
       <div className={styles.container}>
         <h1 className={styles.title}>Hello React</h1>
       </div>
     );
   };

   export default MyComponent;

在上面的示例中，`styles` 对象是通过 CSS Modules 自动生成的。你可以在组件中通过 `styles.className` 的方式来引用对应的样式类名，确保样式的模块化。这样做可以避免全局污染和样式冲突的问题。

当构建项目时，Webpack会自动将CSS Modules转换为唯一的类名，并将其应用到相应的元素上。这样，你就可以在React组件中方便地使用模块化的CSS样式了。