I have the following code in a React and Sass project:
<header className="App-header" style={{backgroundColor: accentColour, color: accentColour}}>
accentColour is defined earlier using useState() and thus when I setAccentColour(newcolour), React re-renders the background to the new colour. My question is, how do I add a colour transition between the different colours - such that one background colour smoothly transitions into the next background colour when accentColour changes?
what you can do is something similar to this:
<header className="App-header" style={{ backgroundColor: `${accentColor}`, transitionDuration: '500ms' }}>