Question

我的React应用上有两条路线：/a和/b。

对于 / a ，我希望body css标记包含 background-color: red; 。

对于 / b ，我希望body css标记包含 background-color: blue; 。

组件a和b都存在于不同的.JSX文件中，并且都导入了自己的main.scss文件，该文件定义了各自的body background-color。

但是，由于整个应用程序都编译为body标记，因此似乎存在冲突，并且两个路径中只有一个body标记受到尊重。

  <body>
    <script src="bundle.js" type="text/javascript"></script>
  </body>

我希望它在body标记而不仅仅是容器div上的原因是当我滚动到页面边界外时我希望background-color可见（Mac上的反弹效果）和iOS）。

这样做的正确方法是什么？

Answer 1

这种情况正在发生，因为当您在没有CSS模块的组件中导入样式时，样式是全局的，因此您的 body 样式定义了两次（您可以看到{{1}中的所有样式}标签）。

您可以通过在组件componentDidMount（）方法中设置背景颜色来解决此问题。

实施例

<head>

Answer 2

我同意QoP所说的话，但除此之外，您还应确保使用componentWillUnmount将其设置回该组件之外的任何正常位置。

例如：如果通常在整个应用程序中都保留text-align，但是对于一个组件，则希望它居中，但是在组件需要返回到左边之后，您将执行以下操作：

componentDidMount() {
    document.body.style.textAlign = "center"
  }

  componentWillUnmount(){
    document.body.style.textAlign = "left"
  }

Answer 3

添加此代码

componentDidMount(){
    document.body.style.backgroundColor = "white"
}

希望能提供帮助。

Answer 4

或者，如果您使用功能组件，则可以使用useEffect ...

useEffect(() => {
    document.body.className = 'class-name';
}, []);