Changing CSS with JavaScript inside React

JavaScript
1

Tell us what’s happening:
Hi everyone! I am using react for this first project, and I am struggling to figure out how to change the CSS of the code so that when the new quote button is clicked I can easily change the color of the text and background. Right now, I have just changed the CSS inline. Instead, I am wondering how I can edit the CSS with JavaScript so that I can cleanly add animations to the color change.

Thanks in advance!!

Your code so far
https://codepen.io/leonard-mohr/pen/poydQXg

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_16_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36.

Challenge: Build a Random Quote Machine

Link to the challenge:

2

For example using css variables:

In JS on line 47 add:

<div class="container vw-100 background my-class" style={{'--my-color': this.state.color}}>

and add to CSS:

.my-class {
  background-color: var(--my-color);
  transition: background-color 0.5s linear;
}
1 Like