姿势元素的孩子不响应姿势变化

Question

AnimDiv does not appear to change its style as the pose variable changes. The same approach would work with the parent, however the child seems to take only the initial value of whatever's passed to its pose , then doesn't care about it on subsequent re-renders.

Why is that so?

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>
    );
};

EDIT: It does respond to pose changes, however for whatever reason it does not switch backgrounds. Opacity, for example, worked.

Answer 1

For background-color , the value be cannot be a color literal (such as red ). Substituting a rgb(r,g,b) for it will make the pose work.