反应路线-车身css标签上的不同样式
我的React应用程序上有两条路由：反应路线-车身css标签上的不同样式,css,reactjs,sass,Css,Reactjs,Sass,我的React应用程序上有两条路由：/a和/b 对于/a，我希望bodycss标签具有背景色：红色 对于/b，我希望bodycss标签具有背景色：蓝色 两个组件a和b位于不同的.JSX文件中，并且都导入自己的main.scss文件，该文件定义了各自的主体背景色 但是，由于整个应用程序被编译到body标记中，因此似乎存在冲突，并且两条路线只使用body标记中的一个 <body> <script src="bundle.js" type="text/javascript
/a/bbody背景色：红色body背景色：蓝色abmain.scss主体背景色bodybody <body>
<script src="bundle.js" type="text/javascript"></script>
</body>
body背景色在我滚动到页面边界之外时可见（Mac和iOS上的反弹效果）
正确的方法是什么？这是因为当您在没有CSS模块的组件中导入样式时，样式是全局的，因此您的主体样式定义了两次（您可以在
标记中看到所有样式）
您可以通过在componentDidMount（）方法中设置背景色来修复此问题
范例
componentDidMount(){
document.body.style.backgroundColor = "red"// Set the style
document.body.className="body-component-a" // Or set the class
}
我同意QoP所说的，但是，作为一个补充，您还应该确保使用componentWillUnmount将其设置回通常位于该组件之外的任何位置
例如：
如果整个应用程序的文本对齐通常为左对齐，但对于一个组件，您希望它居中，但在该组件之后，它需要返回到左对齐，则您将执行以下操作：
componentDidMount() {
document.body.style.textAlign = "center"
}
componentWillUnmount(){
document.body.style.textAlign = "left"
}
添加此代码
希望能有所帮助。或者，如果您使用的是功能组件，您也可以使用useEffect进行同样的操作
useEffect(() => {
document.body.className = 'class-name';
}, []);
你在使用CSS模块吗？还是只是导入css？@QoP导入css
useEffect(() => {
document.body.className = 'class-name';
}, []);