Reactjs 如何更改主体的背景颜色？
我正在使用React.js，希望更改整个页面的背景色。我不知道该怎么做。请帮忙，谢谢Reactjs 如何更改主体的背景颜色？,reactjs,Reactjs,我正在使用React.js，希望更改整个页面的背景色。我不知道该怎么做。请帮忙，谢谢 编辑（2018年9月2日）：我正在链接GitHub上的一个项目。我现在没有联机此项目，但在/client文件夹中是客户端服务器。过来看。这就是我回答问题的方式。最简单的解决方案有点粗糙，但您可以使用原始javascript修改主体样式： document.body.style = 'background: red;'; // Or with CSS document.body.classList.add('ba
编辑（2018年9月2日）：我正在链接GitHub上的一个项目。我现在没有联机此项目，但在
/clientdocument.body.style = 'background: red;';
// Or with CSS
document.body.classList.add('background-red');
从“React”导入React；
从“react Helmet”导入{Helmet}；
类应用程序扩展了React.Component{
渲染（）{
返回(
{'body{背景色：红色；}'}
...
);
}
};
最后，有很多工具提供了更干净的方法来处理这个问题。但是，如果您不想依赖第三方，如果您不想让它太具有交互性，那么raw JS选项可能就足够了。制作一个id为“wrapper”的包装组件，然后创建一个具有颜色状态的样式：
getInitialState:函数（）{
返回{color:“white”}；//设置初始状态的颜色。
},
changeColor:函数（）{
this.setState（{color:“black”}）；//设置更改后的颜色。
},
渲染：函数（）{
var style={backgroundColor:this.state.color}；
//包装器（根）组件
返回(
改变
);
}
反应头盔（） 我真的觉得这个图书馆很有用。我认为这是一个非常干净的解决方案 示例用法：
import Helmet from 'react-helmet';
<Helmet bodyAttributes={{style: 'background-color : #fff'}}/>
从“react Helmet”导入头盔；
create react app// in your css file
.background-white {
background-color: white !important;
}
// in your react component
componentDidMount() {
document.body.classList.add("background-white");
}
componentWillUnmount() {
document.body.classList.remove("background-white");
}
使用componentWillMount无法可靠地工作。使用document.body.style也无法可靠地工作。我只是在这方面做了一点尝试。对于我来说，简单的解决方案并不完全直观，全部都在
public/index.html中：
<html style="background-color: red">
获取页面底部和第二个条目：
<body style="background-color: red">
这会让你进入页面的顶部，即你的反应代码
一个问题有两个条目，但都在一个文件中，不需要新的lib，似乎可以工作。请不要安装任何软件包，这非常简单！
加
您的JS代码或通过CSS，如下所示：
constchangebackground=（）=>{
常量stylesObj={
背景：“绿色”
};
报税表（<
div id=“你好，世界”
样式={
stylesObj
}
className=“container”>
<
/div>
)
}
导出默认背景；
//ReactDOM.render（
.container{
位置：固定；
宽度：100%；
身高：100%；
z指数：-10；
文本对齐：居中；
过渡：所有500ms缓解；
}
如果使用React with Bootstrap，只需在index.html
文件中的
标记中包含一个背景色引导类，如下所示：
<body class="bg-light">
您可以从中选择其他颜色在互联网上搜索了一段时间后，我在现已弃用的github repo上找到了此解决方案：
document.body.style.backgroundColor=“INSERT_COLOR”
您可以在React中使用CSS模块。下面是名为Home.js的文件的Javascript代码
import styles from './Home.module.css';
const Home = ()=>{
return(
<div className = {styles}>
</div>
);
}
export default Home;
尝试将此应用于您的代码
componentDidMount() {
document.body.style.backgroundColor = "red"
}
希望能有所帮助。您应该有一个根组件（例如，div），它受您想要作为背景的颜色的影响。这就是思考它的方式
<div className ="bg-primary"> // this should cover everything in the background
<div className="container mx-auto bg-secondary"> // this could be a centered container that has a different color.
<MyReactComponent />
</div>
</div>
//这应该包括后台的所有内容
//这可能是具有不同颜色的居中容器。
在react src文件夹中，您应该有一个custom.css文件
添加“正文{背景色：；}”'在该custom.css文件中。我能从reactjs组件中获取文档吗？我现在正在尝试这样做，但没有任何运气。document
只是作为undefined@EthanDavisdocument
是浏览器中的一个全局变量；您可以从任何地方访问它。我正在从nodejs服务器渲染我的reactjs。do文档
对于未定义me@EthanDavis那么答案将非常具体地取决于您如何构建服务器端。但同样的概念也适用；您希望使用原始JS来处理此问题，因为React不会呈现
标记。@DaveHowson原因是手动操作文档需要您处理清理/upda手动tes。因此，这并不理想，因为它更容易出错，需要更多的手动工作。也就是说，这是一个有效的用例，React不会让它很难做到。因此，我想说，如果您还没有使用框架/库来简化操作，那么可以操纵文档。您能更详细地描述一下您在这里所做的工作吗你没有真正回答“我如何改变身体的背景颜色？”这个问题，你只是说你是如何创建样板的，你是“直接编辑CSS文件”。这并没有真正解释你用什么CSS来做这件事（我相信不止一种方法），哪些文件，你是如何找到尸体的，等等。我希望我听起来不太像l
body{
background-color: blue;
}
componentDidMount() {
document.body.style.backgroundColor = "red"
}
<div className ="bg-primary"> // this should cover everything in the background
<div className="container mx-auto bg-secondary"> // this could be a centered container that has a different color.
<MyReactComponent />
</div>
</div>