我正在使用React.js并想要更改整个页面的背景颜色.我无法弄清楚如何做到这一点.请帮忙,谢谢.
编辑(18年2月2日):我在GitHub上有一个项目,我在这里链接.我现在没有在线这个项目,但在/client文件夹中是客户端服务器.看看这个.这就是我回答这个问题的方法.
Sim*_*ias 16
最简单的解决方案有点hacky,但你可以使用原始的javascript来修改体型:
document.body.style = 'background: red;';
// Or with CSS
document.body.classList.add('background-red');
更清洁的解决方案可能是使用像heads -helmet或next.js Head组件这样的头部管理器.
import React from 'react';
import {Helmet} from 'react-helmet';
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<style>{'body { background-color: red; }'}</style>
</Helmet>
...
</div>
);
}
};
一些css-in-js还提供管理全局级别样式的工具; 像样式组件injectGlobal.
最后,有很多工具提供了更清晰的方法来处理这个问题.但是如果你不想依赖第三方,那么如果不使它太过互动,那么原始JS选项可能就足够了.
sup*_*rup 14
试试这个到你的代码
componentDidMount() {
document.body.style.backgroundColor = "red"
}
希望有所帮助。
小智 9
没有做任何花哨的最简单的解决方案是:
1)打开public/index.html
2)为您的身体添加内联样式,如下所示:
<body style="background-color: red">
反应头盔(https://github.com/nfl/react-helmet)
我真的觉得这个库很有帮助.我会说真的很干净的解决方案.
样品用法:
import Helmet from 'react-helmet';
<Helmet bodyAttributes={{style: 'background-color : #fff'}}/>
小智 6
如果您想在页面加载之前更改背景颜色，可以执行以下操作。
import React, { useLayoutEffect } from 'react'
useLayoutEffect(() => {
document.body.style.backgroundColor = "red"
});
有关 useLayoutEffect 的更多参考，请查看此处
上面的解决方案介绍了添加外部库以提供所需功能的方法，但是您可以做的只是转到Index.css文件，然后在已编写的“ body”标记中放入“ background-color：'color'”及其做完了
Eth*_*vis -10
自从我问这个问题以来已经有一段时间了。从那时起我开始做的是使用 Facebook 的create-react-app设置，并直接编辑 CSS 文件。
| 归档时间： |
|
| 查看次数： |
38807 次 |
| 最近记录： |