React Routes - different styling on body css tag

That's happening because when you import your styles in your component without CSS Modules, the styles are global so your body style is defined two times (you can see all the styles in the <head> tag).

enter image description here

You can fix that by setting the background color in your component componentDidMount() method.

Example

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

I agree with what QoP said but, as an add on to that, you should also make sure to use componentWillUnmount to set it back to whatever it normally is outside that component.

for example: if normally for the whole application text-align is left but for one component you want it to be center, but after the component it needs to return to being left, you will do the following:

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

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

Tags:

Css

Sass

Reactjs

Recent Posts