React应用全局背景色设置问题：滚动后背景变白如何解决？

你的问题核心在于没有启用自定义的index.css样式，再加上部分场景下根容器或全局元素的背景未被正确覆盖，导致滚动/加载时出现白色背景。以下是具体解决步骤：

1. 启用index.css的导入 #

在index.js中取消import './index.css'的注释，让你写的body样式真正加载生效：

// 移除注释，启用全局样式文件
import './index.css'

2. 完善全局样式覆盖 #

修改index.css，同时覆盖html、body和React根容器#root，确保所有层级都继承深色背景，避免内容不足或滚动时露出白色：

/* 覆盖html、body和根容器，确保全局背景一致 */
html, body, #root {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #090909 !important;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

3. 处理Bootstrap的潜在冲突 #

你导入了Bootstrap的CSS，它可能会给.container、.row、.card等容器设置默认白色背景。如果遇到局部组件背景变白，可以在app.scss中全局覆盖这些样式：

// 在app.scss中添加，覆盖Bootstrap默认容器背景
.container, .row, .card {
  background-color: inherit !important;
}

关键说明 #

• 启用index.css是基础：你之前写的body样式因注释导入根本没被加载，自然无法生效。
• 覆盖html和#root：当页面内容高度不足视口时，#root可能只占部分高度，此时若body未设置min-height:100vh，滚动会露出html的默认白色；同时确保#root继承背景，避免React组件挂载区域出现白色断层。
• 处理Bootstrap冲突：第三方UI库的默认样式可能覆盖全局设置，需要针对性继承深色背景。

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