React Routes - различный стиль на теге body css

У меня есть два маршрута в моем приложении React: /a и /b.

Для /a я хочу, чтобы тег body css имел background-color: red;.

Для /b я хочу, чтобы тег body css имел background-color: blue;.

Оба компонента a и b живут в разных файлах .JSX, и оба импортируют собственный файл main.scss, который определяет их собственный body background-color.

Однако, поскольку все приложение скомпилировано в тег body, кажется, что существует конфликт, и только один из тегов body соблюдается для обоих маршрутов.

  <body>
    <script src="bundle.js" type="text/javascript"></script>
  </body>

Причина, по которой я хочу использовать тег body, а не только контейнер div, заключается в том, что я хочу, чтобы background-color был видимым, когда я просматриваю границы страницы (эффект отскока на Mac и iOS).

Каков правильный способ сделать это?

Ответы

Ответ 1

Это происходит потому, что, когда вы импортируете свои стили в свой компонент без CSS-модулей, стили являются глобальными, поэтому ваш стиль body определяется два раза (вы можете видеть все стили в теге <head>).

Вы можете исправить это, установив цвет фона в свой компонент componentDidMount().

Пример

componentDidMount(){
    document.body.style.backgroundColor = "red"// Set the style
    document.body.className="body-component-a" // Or set the class
}

Ответ 2

Я согласен с тем, что сказал QoP, но, как дополнение к этому, вы также должны убедиться, что используете componentWillUnmount, чтобы установить обратно то, что обычно находится за пределами этого компонента.

например: если обычно для всего приложения оставлено выравнивание текста, но для одного компонента вы хотите, чтобы он был в центре, но после того, как компонент должен вернуться в левое положение, вы будете делать следующее:

componentDidMount() {
    document.body.style.textAlign = "center"
  }

  componentWillUnmount(){
    document.body.style.textAlign = "left"
  }

Ответ 3

Добавьте этот код

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

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