React中CSS模块样式未生效问题排查求助

• 修正CSS语法错误：你的CSS代码里所有属性值都加了双引号，这不符合CSS语法规范，会直接导致样式完全失效。正确写法需去掉引号：

.button {
    color: #d0e6a5;
    background-color: #5d684b;
    border: none;
    border-left: 4px solid #d0e6a5;
    font-size: 28px;
    padding: 6px 12px;
    margin: 3px;
    width: 200px;
}

• 检查CSS模块配置：

  • 若使用Create React App，默认支持.module.css后缀的CSS模块，无需额外配置；若为自定义Webpack配置，需确保css-loader开启modules选项，示例配置如下：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.module\.css$/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true // 必须开启该选项
              }
            }
          ]
        }
      ]
    }
  };
  

• 验证类名注入：打开浏览器开发者工具的Elements面板，查看按钮元素的class属性，应显示类似Documentation_button_xxxx的哈希类名（CSS模块自动生成）。若仅显示普通button类，说明模块引入或配置存在问题。

• 核对文件路径与拼写：确认import styles from "./Documentation.module.css"的路径正确，文件名（含大小写）与实际文件一致——Linux/macOS环境下文件名大小写敏感，需特别注意。

• 检查样式优先级与覆盖：在Elements面板的Styles标签中，查看对应类的样式是否被划掉（表示被更高优先级样式覆盖），或是否存在语法错误导致样式未被解析。

• 确认styles对象的使用：检查组件中是否正确调用styles.button，注意大小写（避免写成styles.Button），可在组件内用console.log(styles)打印styles对象，确认是否包含button属性。

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