如何更改HTML页面的背景色?安装库

2020-06-01 23:09:10

我正在使用React.js,希望更改整个页面的背景色。我想不出怎么做这件事。请帮帮忙,谢谢。

编辑(9月2;18):我在GitHub上有一个项目,我在这里链接。我现在没有这个项目在线,但是在/client文件夹中是客户端服务器。快看啊。我就是这样回答这个问题的。

最简单的解决方案有点老套,但您可以使用raw javascript修改正文样式:

更干净的解决方案可能是使用像react-helmet或next.js head组件这样的主管管理器。

从';Reaction;导入{Helmet}从';React-Helmet';;类应用程序扩展React.Component{Render(){Return(<;div className=";Application";&>;<;Helmet&>;<;Style&>;{';Body{Background-color:Red;}<;}<;/style&>t;<。}};

最后,有很多工具可以提供更干净的方式来处理这个问题。但是如果你不想依赖第三方,原始的JS选项可能就足够好了,如果你不让它太互动的话。

我可以从reactjs组件中获取文档吗?我现在正试着做这件事,但没有任何运气。文件只是回来时没有定义-伊森·戴维斯(Ethan Davis)。

@Ethan Davis文档是浏览器中的全局变量;您可以从任何地方访问它。-西蒙·布德里亚斯(Simon Boudrias)

我要从NodeJS服务器呈现我的反应。文档未为我定义--伊森·戴维斯(Ethan Davis)。

@Ethan Davis,那么答案将非常具体,取决于您是如何构建服务器端的。但是同样的概念仍然成立;您希望使用原始JS来处理这一点,因为Reaction不会呈现<;body>;标记。-西蒙·布德里亚斯(Simon Boudrias)。

@DaveHowson的原因是手动操作文档需要您手动处理清理/更新。因此,它不是理想的,因为它更容易出错,需要更多的人工工作。这就是说,这是一个有效的用例,并且RESPECT并不会使其难以实现。因此,我会说,如果您还没有使用使文档更容易的框架/库,那么操作文档是可以的。-西蒙·布德里亚斯(Simon Boudrias)。

这是一个非常硬编码的解决方案,与其他主题非常不同。不太好。-Doublejosh。

上面的解决方案讲述了如何添加外部库以提供所需的功能,但是您可以做的只是转到Index.css文件,并在已经写入的标记body中放置";Background-color:';color';";然后就完成了。

最简单的解决方案!:useEffect(()=>;{Docent.body.style.backround Color=';red';},[])-Yannuth。

在互联网上搜索了一段时间后,我在一个现已弃用的GitHub回购上找到了这个解决方案:

我只是摆弄了一会儿这个。对我来说很简单的解决方案,并不完全直观,全部公开/index.html:

一个问题的两个条目,但它都在一个文件中,不需要新的库,似乎可以工作。

const Changeback=()=>;{const style Obj={Background:";green";};return(<;div id=";hello-world";style={style esObj}className=";tainer";<;<;/div>;)}导出默认更改背景;//ReactDOM.ender(<;Changeback/>;,

.容器{位置:固定;宽度:100%;高度:100%;z-index:-10;文本对齐:居中;过渡:全部500ms缓动;}。

//在css文件中。Background-White{Background-Color:White!Important;}//在您的Reaction组件中DidMount(){document.body.classList.add(";background-white";);}componentWillUnmount(){document.body.classList.remove(";background-white";);}。

如果将Reaction与Bootstrap一起使用,只需在index.html文件中的<;body>;标记中包含一个背景色Bootstrap类,如下所示:

您可以在Reaction中使用CSS模块。以下是名为Home.js的文件的Javascript代码。

从';./Home.module e.css';;const Home=()=>;{return(<;div className={Style}>;<;/div>;);}导入样式。}导出默认主页;

在名为Home.module e.css(格式为[name].module e.css)的CSS模块中,输入以下内容,您的页面的背景颜色将为蓝色

创建一个ID为Wrapper";的包装器组件网,然后创建具有颜色状态的样式:

getInitialState:function(){return{color:";White";};//设置初始状态的颜色。},changeColor:function(){this.setState({color:";Black";});//设置更改后的颜色。},Render:function(){var style={backround Color:this.state.color};//包装器(根)组件return(<;div id=";a onClick={this.changeColor}>;change<;/a>;<;/div>;);}。

我已经有一段时间没有问这个问题了。从那时起,我开始做的事情就是使用Facebook的创建-反应-应用程序设置,并直接编辑CSS文件。

这并没有真正回答如何更改正文背景色的问题。您刚才说您是如何创建样板的,并且您正在直接编辑CSS文件。这并没有真正解释你使用什么CSS来做这件事(我相信有不止一种方式),哪些文件,你如何获得对身体的引用,等等。我希望我听起来不像个混蛋,只是没有找到非常有描述性的答案。我使用@Reni的答案Tmin让它正常工作。

点击“发布您的答案”,即表示您同意我们的服务条款、隐私政策和Cookie政策。

不是你想要的答案吗?浏览标记的其他问题或提出您自己的问题。