CODEWITHSUNDEEP
javascripthtmlcssreactjscomponents
Leonardo Marques
Leonardo Marques

Reputation: 93

Changing Background Component - REACTJS

i'm trying to change the background of components but it doesn't work

this is my index.css:

body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background: url(./styles/image/teste3.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

That background works perfectly but i want to change it when i access another component

So i made a component call Portfolio and when i access that component it was to change the background, but it doesn't work

Portfolio CSS:

.background-portfolio {
  background: url(../image/teste2.jpg) no-repeat center center fixed !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  transition: all 0.5s !important;
}

Portfolio.js:

componentWillMount(){
    document.body.classList.add("background-portfolio");
  }

any tips? obs: sorry for my bad english

Upvotes: 0

Views: 315

Answers (1)

DevDwarf
DevDwarf

Reputation: 154

Try using componentDidMount instead and also try changing .background-portfolio to body.background-portfolio

HTML

<div id="app"></div>

CSS

body {
  background-color:blue;
}
body.background-portfolio {
  background-color: red;
}

JS

class App extends React.Component {
componentDidMount(){
  document.body.classList.add("background-portfolio");
}
render() {
  return (
    <div>
      Hello
    </div>
  )
 }
}

ReactDOM.render(<App />, document.querySelector("#app"))

http://jsfiddle.net/xn43hpov/

Upvotes: 1

Related Questions