我的 React 应用程序上有两条路线：/a和/b.
对于/a，我希望bodycss 标签有一个background-color: red;.
对于/b，我希望bodycss 标签有一个background-color: blue;.
组件a和b.JSX 文件都存在于不同的 .JSX 文件中，并且都导入了自己的main.scss文件，该文件定义了各自的body background-color.
但是，由于整个应用程序都编译到了body标签中，因此似乎存在冲突，并且body两条路线都只尊重其中一个标签。
<body>
<script src="bundle.js" type="text/javascript"></script>
</body>
我想要它在body标签上而不只是一个容器 div 的原因是我希望background-color当我滚动到页面边界之外时它是可见的（Mac 和 iOS 上的反弹效果）。
这样做的正确方法是什么？
发生这种情况是因为当您在没有 CSS module的组件中导入样式时，样式是全局的，因此您的主体样式被定义了两次（您可以看到<head>标签中的所有样式）。
您可以通过在组件 componentDidMount() 方法中设置背景颜色来解决该问题。
例子
componentDidMount(){
document.body.style.backgroundColor = "red"// Set the style
document.body.className="body-component-a" // Or set the class
}
我同意 QoP 所说的，但是，作为对此的补充，您还应该确保使用 componentWillUnmount 将其设置回通常在该组件之外的任何内容。
例如：如果通常整个应用程序的 text-align 是左对齐的，但是对于一个组件，您希望它居中，但是在组件之后它需要返回到左对齐，您将执行以下操作：
componentDidMount() {
document.body.style.textAlign = "center"
}
componentWillUnmount(){
document.body.style.textAlign = "left"
}
或者，如果您使用功能组件，您可以使用 useEffect 做同样的事情...
useEffect(() => {
document.body.className = 'class-name';
}, []);
添加此代码
componentDidMount(){ document.body.style.backgroundColor = "white" }
希望有所帮助。