React项目CSS仅首个类样式生效 其余样式不显示问题求助

样式失效的核心是CSS语法错误：你在多段CSS规则的闭合大括号}后错误添加了多余的分号;。
按照CSS语法规范，分号仅用来分隔大括号内部的单条样式声明，规则块的结束标记只有}，后面不需要额外加分号。React项目中的样式文件会先经过构建链路的css-loader、PostCSS等工具解析，这类工具的CSS解析容错性弱于浏览器原生解析，在遇到第一个多余分号时会直接触发语法截断，丢弃后续所有CSS内容。因此只有错误位置之前的.modal-content样式能被正常解析打包，后面的规则根本没有进入最终输出的样式表，自然不会出现在浏览器开发者工具的样式面板中。
你贴出的React组件代码本身没有问题，类名和选择器是对应匹配的。

删除所有规则闭合大括号后面的多余分号，修正后的样式代码如下：

.modal-content {
  width: 15rem;
  background: red;
}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-header, .modal-footer {
  padding: 10px;
}

.modal-title {
  margin: 0;
}

.modal-body {
  padding: 10px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

如果修正语法后仍有异常，按以下顺序排查即可：

• 重启开发服务，手动删除项目下的构建缓存目录（比如.cache、dist、build）后重新编译，避免旧的异常构建结果被缓存复用
• 确认样式文件已正确导入到对应组件中，导入路径无拼写错误
• 检查CSS中是否混入全角标点（全角分号、全角冒号、全角大括号等），这类字符同样会导致解析中断
• 核对JSX里的className取值和CSS选择器完全匹配，无大小写错误、多余空格类的拼写问题

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