React Routes - 身体css标签上的不同样式
我的React应用程序上有两条路由:/a和/b.
对于/ a,我希望bodycss标签有一个background-color: red;.
对于/ b,我希望bodycss标签有一个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上的弹跳效果)时我希望它是可见的.
这样做的正确方法是什么？
QoP*_*QoP 17
这种情况正在发生,因为当您在没有CSS模块的组件中导入样式时,样式是全局的,因此您的体型定义了两次(您可以看到<head>标签中的所有样式).
您可以通过在组件componentDidMount()方法中设置背景颜色来解决此问题.
例
componentDidMount(){
document.body.style.backgroundColor = "red"// Set the style
document.body.className="body-component-a" // Or set the class
}
| 归档时间： |
|
| 查看次数： |
4247 次 |
| 最近记录： |