我有一个组件：
const Square = styled.div`
width: 40px;
height: 40px;
background: green;
`;
如何将正方形的颜色从绿色逐渐变为蓝色(从绿色到蓝色的平滑过渡，可能需要一秒钟以上(？
我不知道如何使用reactjs工具。。。但假设您在浏览器环境中工作，则可以使用纯CSS动画。
请允许我留下一个现成的例子：
<!doctype html>
<html>
<head>
<title>Example</title>
</head>
<style>
.square {
width: 50px;
height: 50px;
position: absolute;
background-color: black;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.change-color-to-red {
animation-name: change-color-to-red;
}
@keyframes change-color-to-red {
0% { }
100% { background-color: red}
}
</style>
<body>
<div class="square change-color-to-red"></div>
</body>
</html>
在线示例