logo标签列表

React路由 - 不同的样式在body CSS标签上

cssreactjssass
24

我在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>
我希望它在标签上而不仅仅是一个容器
的原因是，我希望当我滚动页面超出边界时（Mac和iOS上的反弹效果），可见。

应该如何正确实现？

你正在使用CSS模块吗？还是只是导入CSS？ - QoP
@QoP 导入 CSS - Snowman
4个回答
22
这是因为当您在组件中导入样式而没有使用CSS模块时，样式是全局的，所以您的样式被定义了两次（您可以在标签中看到所有样式）。

enter image description here

你可以通过在组件的componentDidMount()方法中设置背景颜色来解决这个问题。
示例
componentDidMount(){
    document.body.style.backgroundColor = "red"// Set the style
    document.body.className="body-component-a" // Or set the class
}
4

或者，如果您正在使用函数组件，您可以使用useEffect来实现相同的功能...

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

我同意QoP所说的，但是作为补充，你还应该使用componentWillUnmount将其设置回在该组件之外通常使用的任何内容。

例如： 如果整个应用程序通常文本对齐方式为左对齐，但对于一个组件，您希望它居中，但在组件之后需要返回到左对齐，则应执行以下操作：

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

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

添加这段代码

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

希望能够帮到你。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接