如何在React中添加特定状态值的重新渲染之间的转换

Question

React和Sass项目中有以下代码：

<header className="App-header" style={{backgroundColor: accentColour, color: accentColour}}>

accentColour是早先使用useState((定义的，因此当我设置accentColour(newcolour(时，React会将背景重新渲染为新颜色。我的问题是，如何在不同的颜色之间添加颜色过渡，以便在accentColour发生变化时，一种背景颜色平滑地过渡到下一种背景色？

Answer 1

您可以做的事情与此类似：

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