姿势元素的子元素不响应姿势更改

Question

AnimDiv

似乎不会随着pose变量的变化而改变其样式。同样的方法也适用于父级，但是子项似乎只获取传递给其pose的初始值，然后在随后的重新渲染中不关心它。

为什么会这样？

const AnimDiv = posed.div({
red: {
backgroundColor: "red"
},
blue: {
backgroundColor: "blue"
}
});
const AnimationTest = () => {
const [pose, setPose] = useState("red");
return (
<div
className="animated"
>
<AnimDiv
style={{ position: "absolute", height: "20px", width: "20px" }}
onClick={() => setPose(x => (x === "blue" ? "red" : "blue"))}
pose={pose} // only the value from the initial render matters; you may change the pose state variable, but the element will not adjust its style
></AnimDiv>
</div>
);
};

编辑： 它确实会响应姿势变化，但是无论出于何种原因，它都不会切换背景。例如，不透明度起作用了。

Answer 1

>对于background-color，值 be 不能是颜色文字(如red(。用rgb(r,g,b)代替它将使姿势起作用。