How can I add a transition between re-renders of a specific state value in React?-CodePudding

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?

CodePudding user response：

what you can do is something similar to this:

<header className="App-header" style={{ backgroundColor: `${accentColor}`, transitionDuration: '500ms' }}>