如何在React项目中修改root关联的body背景色？

问题场景 #

我的项目结构如下：

<div id="root">
   <div class="main-c container-fluid">
   </div>
   ...
</div>

index.tsx代码：

import './index.css';
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>
);

App组件代码：

import "bootstrap/dist/css/bootstrap.min.css"
function App() { 
return (
    <Container className="main-c" fluid>
       ...
    </Container>
  );
}

我尝试修改浏览器body的background-color，从默认#fff改为透明白色，但在index.css中用以下选择器设置均无效：

:root{
  background-color: #fff0;
}

body {
  background-color: #fff0;
}

#root{
  background:#fff0;
}

页面背景色仍为白色，请问该如何正确修改？

解决方案 #

1. 修正无效的颜色值 #

#fff0不是标准的CSS颜色值，浏览器无法正确解析。如果你需要完全透明的白色，可以使用以下任意一种标准写法：

• transparent（直接使用透明关键字）
• rgba(255, 255, 255, 0)（RGBA格式，最后一位0表示完全透明）
• #ffffff00（8位十六进制，前6位是RGB，最后2位是透明度，00表示完全透明）

2. 调整CSS引入顺序，提升优先级 #

你当前在App组件中后引入Bootstrap的CSS，这会导致Bootstrap的默认样式覆盖你在index.css中设置的body样式。解决办法是调整引入顺序：
将Bootstrap的CSS引入移到index.tsx中，且放在index.css之前：

// index.tsx
import "bootstrap/dist/css/bootstrap.min.css";
import './index.css';
// 后续渲染代码不变

这样index.css的样式会因为后加载而覆盖Bootstrap的默认样式。

3. 检查容器组件的背景色 #

即使body的背景色设置正确，Bootstrap的Container组件（即你的.main-c.container-fluid）可能默认带有白色背景，导致页面看起来还是白色。需要同时修改容器的背景色：

/* index.css */
body {
  background-color: transparent;
}

.main-c.container-fluid {
  background-color: transparent;
}

应急方案：使用!important（不推荐长期使用） #

如果暂时无法调整引入顺序，可以通过!important强制提升样式优先级：

body {
  background-color: transparent !important;
}

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