My website has a <Login/> page and a <Dashboard/>.
The login page is styled with a background color of #222, while the Dashboard page has a background of whitesmoke
To achieve this, I have set the body CSS like this:
body {
background-color: #222222;
}
And in the Dashboard.js:
componentWillMount() {
document.body.style.backgroundColor = "whitesmoke";
}
componentWillUnmount() {
document.body.style.backgroundColor = null;
}
Everything was working fine until I decided to add an image as the background for the Login page, here's how I did it:
body {
background-color: #222222;
background: url('../../public/img/bg.png');
background-repeat: repeat;
}
However, now my Dashboard also shows the same background image. Even when I tried to remove the image in the Dashboard component:
componentWillMount() {
document.body.style.backgroundImage = null;
document.body.style.backgroundColor = "whitesmoke";
}
componentWillUnmount() {
document.body.style.backgroundColor = null;
}
I am facing this issue. How can I resolve it?