在React项目里，给组件设置背景颜色却看不到效果是很常见的困扰。多数情况下代码没有明显报错，但页面元素依然是透明或默认背景。这往往和CSS优先级、样式写法以及React对样式的处理方式有关。
为什么背景颜色会不生效
React支持多种写样式的方式，不同方式之间存在优先级差异。如果同时使用外部CSS类、CSS Modules和行内样式，就容易出现后者被前者覆盖或根本没应用上的问题。
常见的几种陷阱
- 把CSS属性名写成连字符形式，例如 style={{ 'background-color': 'red' }}，在JSX中应使用驼峰写法 backgroundColor。
- CSS文件中选择器优先级更高，比如使用了 id 选择器或嵌套层级深的类，覆盖了组件里的设置。
- CSS Modules类名没有正确绑定，导致生成的 className 为空。
- 行内样式被全局样式里的 !important 规则压制。
通过代码对比看出问题
下面这段有问题的写法中，背景颜色不会生效：
// 错误示例：在JSX行内样式中使用连字符属性名
function Box() {
return (
<div style={{ 'background-color': 'blue', width: '100px', height: '100px' }}>
内容
</div>
);
}
正确的方式是使用驼峰命名：
// 正确示例：使用 backgroundColor
function Box() {
return (
<div style={{ backgroundColor: 'blue', width: '100px', height: '100px' }}>
内容
</div>
);
}
使用CSS类时的注意事项
当通过 className 引入样式时，要确认构建工具是否启用了CSS Modules。如果启用了，必须通过 import 获取类名对象：
import styles from './Box.css';
// Box.css 内容:
// .wrap { background-color: green; }
function Box() {
return <div className={styles.wrap}>内容</div>;
}
优先级排查建议
可以在浏览器开发者工具中查看元素，确认 background-color 是否被划掉。若被划掉，说明存在更高优先级规则。此时可调整选择器权重，或临时用行内样式验证。
| 样式方式 | 优先级特点 |
|---|---|
| 外部CSS类 | 受选择器权重影响，可能被覆盖 |
| CSS Modules | 默认局部作用域，权重同普通类 |
| 行内style | 通常高于外部类，但低于 !important |
小结
React中背景颜色不生效大多不是bug，而是写法或优先级理解偏差。检查驼峰命名、类名绑定和样式权重，就能避开这些常见陷阱。
ReactCSS_background-colorstyle_priority修改时间：2026-07-31 02:54:16