Как изменить цвет фона тела?

Я использую React.js и хочу изменить цвет фона всей страницы. Я не могу понять, как это сделать. Пожалуйста, помогите, спасибо.

Редактировать (2 сентября 18 года): у меня есть проект на GitHub, на который я ссылаюсь здесь. У меня сейчас нет этого проекта в сети, но в папке /client находится клиентский сервер. Проверьте это. Вот как я ответил на вопрос.

Ответы

Ответ 1

Прошло некоторое время с тех пор, как я задал этот вопрос. То, что я начал делать с тех пор, это использовать настройку create-react-app для create-react-app Facebook и непосредственно редактировать файлы CSS.

Ответ 2

Самое простое решение немного хаки, но вы можете использовать необработанный javascript для изменения стиля тела:

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

Более чистым решением может быть использование головного менеджера, такого как реагирующий шлем или компонент 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 может быть достаточно хорошей, если вы не сделаете ее слишком интерактивной.

Ответ 3

Самое простое решение, не делая ничего интересного, заключается в следующем:

1) Открыть public/index.html

2) Добавьте встроенный стиль к вашему телу следующим образом: <body style="background-color: red">

Ответ 4

Реактивный шлем (https://github.com/nfl/react-helmet)

Я действительно нашел эту библиотеку очень полезной. Действительно чистое решение, я бы сказал.

Пример использования:

import Helmet from 'react-helmet';

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

Ответ 5

Вышеупомянутые решения говорят о добавлении внешней библиотеки, чтобы предоставить требуемую функциональность, но вместо этого вы можете просто перейти к вашему файлу Index.css и внутри уже написанного тега body добавить "background-color:" color "и его сделанный

Ответ 6

Пожалуйста, не нужно устанавливать какие-либо пакеты очень легко и просто! добавлять

 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>

Ответ 7

Это было самым простым решением для меня:

// 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 не работает надежно.

Ответ 8

Я немного поиграл с этим. Простое решение для меня, не совсем интуитивное, все в public/index.html:

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

который получает нижнюю часть страницы, и вторую запись:

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

который доставит вам верх страницы, т.е. ваш код реакции.

Две записи для одной проблемы, но все в одном файле, не требуют новых библиотек и, похоже, работают.

Ответ 9

Если вы используете React с Bootstrap, просто включите класс Bootstrap фонового цвета в <body> в файле index.html, например так:

<body class="bg-light">

Вы можете выбрать другие цвета на https://getbootstrap.com/docs/4.3/utilities/colors/#background-color

Ответ 10

Через некоторое время, изучая Интернет, я нашел это решение в устаревшем репозитории github:

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

Ответ 11

Вы можете использовать модуль CSS в React. Ниже приведен код Javascript для файла с именем Home.js

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

const Home = ()=>{
    return(

        <div className = {styles}>

        </div>
    );

}

export default Home;

И в модуле css с именем Home.module.css (формат [name].module.css), поместите следующее, и ваша страница будет иметь синий цвет фона

body{
    background-color: blue;
}

Ответ 12

попробуйте это в своем коде

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

Надеюсь помочь.

Ответ 13

Создайте компонент-упаковщик с идентификатором типа "обертка", а затем создайте стиль с состоянием цвета:

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>