React Routes-身体CSS标签的样式不同

我的React应用程序上有两条路线:/a/b

对于/ a,我希望bodycss标记具有一个background-color: red;

对于/ b,我希望bodycss标记具有一个background-color: blue;

这两个组件ab都位于不同的.JSX文件中,并且都导入自己的main.scss文件,这些文件定义了各自的body background-color

但是,由于将整个应用程序编译到body标记中,因此似乎存在冲突,并且body两条路径仅尊重其中一个标记。

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

我希望它在body标签上而不只是在容器div上的原因是,background-color当我在页面边界之外滚动时(在Mac和iOS上的反弹效果),我希望可见。

正确的方法是什么?

Tom米亚2020/03/24 18:13:59

添加此代码

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

希望对您有所帮助。

小卤蛋2020/03/24 18:13:59

我同意QoP所说的,但是作为补充,您还应该确保使用componentWillUnmount将其设置回该组件之外的任何位置。

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

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

  componentWillUnmount(){
    document.body.style.textAlign = "left"
  }
乐米亚2020/03/24 18:13:59

之所以发生这种情况,是因为当您在没有CSS模块的组件中导入样式时,这些样式是全局的,因此您的主体样式被定义了两次(您可以在<head>标记中看到所有样式)。

在此处输入图片说明

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

componentDidMount(){
    document.body.style.backgroundColor = "red"// Set the style
    document.body.className="body-component-a" // Or set the class
}