React自学项目：添加联系人模态框CSS样式失效求助

以下是几种常见的排查方向，你可以逐一验证：

• 确认CSS模块的引入与使用方式
  先检查AddContactModal.js里的引入代码是否正确，必须用模块导入的方式：

  import styles from './css/addContactModal.module.css'
  

  在JSX中绑定类名时，要通过styles对象访问，比如：

  <div className={styles['modal-content']}>...</div>
  

  注意如果CSS类名是短横线分隔的，不能直接用styles.modal-content，必须用方括号语法。

• 核对类名拼写一致性
  检查addContactModal.module.css里的modal-content类名拼写、大小写是否和JSX中使用的完全一致，哪怕一个字符错了都不会生效。

• 检查样式是否被覆盖
  打开浏览器开发者工具（F12），选中模态框元素，查看「样式」面板：

  • 如果看不到modal-content的规则，说明模块CSS没正确加载；
  • 如果看到规则但被划掉，说明被全局样式或优先级更高的规则覆盖了，可以临时给CSS规则加!important测试（不推荐长期使用），或者调整选择器优先级。

• 验证构建工具配置
  若你用的不是Create React App，而是自定义Webpack配置，要确保配置了CSS模块的加载规则，比如：

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

  用CRA的话，默认已经支持模块CSS，无需额外配置。

• 确认类名绑定的DOM元素
  检查JSX里是否把modal-content类加到了正确的元素上，比如是不是误加到了模态框的遮罩层，而非表单所在的容器。

场景补充：
正在学习React，当前代码分支为integrate-html，项目是简易联系人应用。点击添加联系人按钮后，模态框中的添加联系人表单样式未正确加载，尝试通过AddContactModal.js引入./css/addContactModal.module.css中的modal-content类来设置样式，样式异常截图如下：

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