Question

我正在使用React.js并希望更改整个页面的背景颜色。我无法弄清楚如何做到这一点。请帮忙，谢谢。

编辑（18年2月2日）：我在GitHub上有一个项目，我正在链接。我现在没有在线项目，但在/client文件夹中是客户端服务器。看看这个。这就是我回答这个问题的方法。

Answer 1

最简单的解决方案有点hacky，但您可以使用原始javascript来修改正文样式：

document.body.style = 'background: red;';
// Or with CSS
document.body.classList.add('background-red');

更清洁的解决方案可能是使用像react-helmet或next.js Head component这样的总经理。

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还提供管理全局级别样式的工具;比如styled-components injectGlobal。

最后，有很多工具提供了更清晰的方法来处理这个问题。但是如果你不想依赖第三方，那么如果你没有让它变得过于互动，那么原始JS选项可能就足够了。

Answer 2

反应头盔（https://github.com/nfl/react-helmet）

我真的觉得这个库很有帮助。我会说真的很干净的解决方案。

样本用法：

import Helmet from 'react-helmet';

<Helmet bodyAttributes={{style: 'background-color : #fff'}}/>

Answer 3

最简单的解决方案是不做任何花哨的事情：

1）打开public / index.html

2）为您的身体添加内联样式，如下所示： <body style="background-color: red">

Answer 4

上述解决方案讲述了添加外部库以提供所需的功能，但您可以做的只是转到您的Index.css文件并在已经编写的＆＃39;体内。标签放置＆＃34;背景颜色：＆＃39;颜色＆＃39;＆＃34;并完成了

Answer 5

您应该有一个根组件（例如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>

Answer 6

尝试使用此代码

componentDidMount() {
    document.body.style.backgroundColor = "white"
}

希望能提供帮助。

Answer 7

请不需要安装任何软件包，这非常简单！添加

 document.body.style = 'background: red;';

到您的JS代码或通过CSS，如下所示：

const Changebackground = () => {
  const stylesObj = {
    background: "green"
  };

  return ( <
    div id = "hello-world"
    style = {
      stylesObj
    }
    className = "container" >
    <
    /div>
  )
}
export default Changebackground;
//ReactDOM.render( < Changebackground / > , document.getElementById('App'));

.container {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -10;
  text-align: center;
  transition: all 500ms ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom.production.min.js"></script>

请检查此选项，以了解其简单性！ https://codepen.io/farbod-aprin/pen/dadJyb

Answer 8

style 属性在 Typescript 中不可写，但 setAttribute 可以正常工作。只需将其弹出到您的 App 组件中即可。在 React 可能的其他样式机制之外拥有一些随机的样式可能不是一个好主意，它可能很难找到，但如果它是你需要的，那么它就是你所需要的。无论如何，这正是我今天所需要的！

    document.body.setAttribute('style', 'background: red;')

Answer 9

默认情况下，假设您使用了 npx Create-React-app MyAppName，您的 React 应用程序将有一个 index.css。

这包含控制默认灰色背景的 css。只需将其编辑为您需要的内容即可。

body {
  margin: 0;
  background-color: #3f3f3f; 
}

Answer 10

在您的 react src 文件夹中，您应该有一个 custom.css 文件。

添加 'body {background-color: ; }' 在那个 custom.css 文件中。

Answer 11

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

PreferenceFragmentCompat

然后在名为Home.module.css（格式为[name] .module.css）的CSS模块中，输入以下内容，您的页面的背景颜色将为蓝色

import styles from './Home.module.css';

const Home = ()=>{
    return(

        <div className = {styles}>

        </div>
    );

}

export default Home;

Answer 12

经过一段时间的搜索，我在一个现已弃用的github存储库中找到了此解决方案：

document.body.style.backgroundColor = "INSERT_COLOR";

您可以将其发布到功能之外（这就是我的用法）

它对我的项目有效：https://github.com/antdke/styled-input-bar/blob/master/src/App.tsx

我需要它为整个应用程序的背景着色。

我在其中找到代码段的地方（在README.md的顶部）：https://github.com/happylinks/react-body-backgroundcolor

希望它可以像帮助我一样帮助所有人：)

Answer 13

如果您将React与Bootstrap一起使用，只需在<body>文件的index.html标签中添加背景色的Bootstrap类，如下所示：

<body class="bg-light">

您可以从https://getbootstrap.com/docs/4.3/utilities/colors/#background-color

中选择其他颜色

Answer 14

我只是摆弄了一下。对我来说，简单的解决方案（并非完全直观）全在public/index.html中：

<html style="background-color: red">

获取页面的底部和第二个条目：

<body style="background-color: red">

使您获得页面的 top ，即。您的反应代码。

一个问题有两个条目，但都在一个文件中，不需要新的库就可以了。

Answer 15

这对我来说是最简单的解决方案：

// 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也不可靠。

Answer 16

使用类似“wrapper”的id创建一个包装器组件，然后创建一个具有颜色状态的样式：

getInitialState: function () {
  return { color: "white" }; // Set your color for initial state.
},

changeColor: function () {
  this.setState({ color: "black" }); // Set your changed color.
},

render: function () {
  var style = { backgroundColor: this.state.color };
  // The wrapper (root) component
  return (
    <div id="fullscreen" style={style}>
       <a onClick={this.changeColor}>change</a>
    </div>
  );
}

结果应该是这样的：

<body>
    <div id="fullscreen" style="background-color: YOUR CUSTOM COLOR">
        <a onclick="THE REACT FUNCTION"></a>
    </div>
</body>

Answer 17

我提出这个问题已经有一段时间了。从那以后我开始做的就是使用Facebook的create-react-app设置，并直接编辑CSS文件。

如何更改身体的背景颜色？

17 个答案: