React Routes - body css标签上的不同样式答案

【问题标题】：React Routes - different styling on body css tagReact Routes - body css标签上的不同样式
【发布时间】：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

标签： css reactjs sass

【解决方案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';
}, []);

【讨论】：