React中使用CSS Modules仍出现样式冲突，该如何修复？

• 规范CSS模块的引入方式
  在CartList和CartShow组件中，必须使用模块化导入语法，避免全局引入：

  // 正确的模块化引入
  import styles from './cartList.module.css';
  // 组件内通过styles对象调用类名
  <div className={styles.cartWrapper}></div>
  

  禁止使用import './cartList.module.css'这类全局引入写法，否则CSS会变成全局样式，污染所有组件。

• 避免使用全局选择器
  检查cartList.module.css中的选择器，绝对不能直接使用标签选择器（如div、header）、通配符*或全局类名。所有样式必须绑定到模块专属类名：

  /* 错误写法：全局标签选择器，会影响所有页面的div */
  div {
    padding: 10px;
  }
  
  /* 正确写法：仅作用于当前模块的类 */
  .cartItem {
    padding: 10px;
  }
  
  /* 如需给组件内子标签设置样式，必须嵌套在模块类名下 */
  .cartWrapper p {
    font-size: 14px;
  }
  

• 验证构建工具的CSS模块配置
  确认Webpack、Vite等构建工具已正确识别.module.css后缀：

  • Vite默认支持CSS模块，无需额外配置；
  • Webpack需确保css-loader的modules选项设为true，配置示例：

    module.exports = {
      module: {
        rules: [
          {
            test: /\.module\.css$/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  modules: true
                }
              }
            ]
          }
        ]
      }
    };
    

  配置正确后，构建工具会给模块类名添加唯一哈希值，避免样式冲突。

• 排查样式优先级与类名冲突
  打开浏览器开发者工具，检查受影响组件的元素，确认是否被应用了来自cartList.module.css的哈希类名。如果是普通类名，说明模块配置未生效；如果是哈希类名，需检查是否存在样式优先级过高的问题（如!important），及时移除这类强制优先级写法。

内容的提问来源于stack exchange，提问作者fadliarz