Дочерний элемент заданного элемента не реагирует на изменения позы

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, значение не может быть литералом цвета (например, red). Подставивrgb(r,g,b) потому что это заставит позу работать.