React Routes - body css标签上的不同样式
Posted
技术标签:
【中文标题】React Routes - body css标签上的不同样式【英文标题】：React Routes - different styling on body css tag 【发布时间】：2016-10-05 03:36:27 【问题描述】：我的 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 上的反弹效果）。
这样做的正确方法是什么？
【问题讨论】：
你在使用 CSS 模块吗？还是只是导入 css？ @QoP 导入 css 【参考方案1】：发生这种情况是因为当您在没有 CSS 模块的组件中导入样式时，样式是全局的，因此您的 body 样式被定义了两次（您可以在 <head> 标签中看到所有样式)。
您可以通过在组件的 componentDidMount() 方法中设置背景颜色来解决此问题。
例子
componentDidMount()
document.body.style.backgroundColor = "red"// Set the style
document.body.className="body-component-a" // Or set the class
【讨论】：
【参考方案2】：我同意 QoP 所说的，但作为补充，您还应该确保使用 componentWillUnmount 将其设置回它通常在该组件之外的任何内容。
例如： 如果通常对于整个应用程序 text-align 是左对齐，但对于一个组件，您希望它居中，但在该组件之后它需要返回到左，您将执行以下操作：
componentDidMount()
document.body.style.textAlign = "center"
componentWillUnmount()
document.body.style.textAlign = "left"
【讨论】：
【参考方案3】：添加此代码
componentDidMount() document.body.style.backgroundColor = "white"
希望能提供帮助。
【讨论】：
【参考方案4】：或者，如果您正在使用功能组件，您可以使用 useEffect...
useEffect(() =>
document.body.className = 'class-name';
, []);
【讨论】：
以上是关于React Routes - body css标签上的不同样式的主要内容，如果未能解决你的问题，请参考以下文章
styled-components - 如何在 html 或 body 标签上设置样式？
使用 React 向 HTML <body> 标签添加一个类？