CODEWITHSUNDEEP
javascriptcssreactjs
WillKre
WillKre

Reputation: 6158

Remove backgroundImage on componentDidMount

I currently have a <Login/> page, and a <Dashboard/>.

The login page has a background of #222, and when you login the Dashboard has a background of whitesmoke

The way I am doing this is having this on the body css:

body {
    background-color: #222222;
}

and this in the Dashboard.js:

componentWillMount() {
  document.body.style.backgroundColor = "whitesmoke";
}
componentWillUnmount() {
    document.body.style.backgroundColor = null;
}

Up to now, this was working. But I now have an Image as my background on the Login page, as seen here: 

body {
    background-color: #222222;
    background: url('../../public/img/bg.png');
    background-repeat: repeat;
}

but my Dashboard inherits the background image, even when I put something like this: 

componentWillMount() {
  document.body.style.backgroundImage = null;
  document.body.style.backgroundColor = "whitesmoke";
}
componentWillUnmount() {
  document.body.style.backgroundColor = null;
}

How do I get around this? Thanks

Upvotes: 0

Views: 184

Answers (1)

Lyubomir
Lyubomir

Reputation: 20037

Why not use classes instead?

componentWillMount() {
  $('body').addClass('has-background');
}
componentWillUnmount() {
  $('body').removeClass('has-background');
}

Also, you may want to abstract those addClass / removeClass and use emits.

Upvotes: 1

Related Questions