打字稿+反应+样式组件的关键帧动画（道具值无效）错误

Question

我确信我做错了什么，这很可能是由于 typecipt 我收到以下错误 该代码与 jsx 一起工作正常 但是当我将其转换为 tsx 时，出现以下错误

警告：标签上的

animation

属性值无效。要么从元素中删除它，要么传递一个字符串或数字值以将其保留在 DOM 中。

这是我创建的反应元素

<Gauge src={gauge}
                animation={() => gaugeRotation(firstMove, secondMove, thirdMove, fourthMove)}
                onAnimationEnd={() => {
                    setFirstMove(fourthMove)
                    setSecondMove(fourthMove)
                    setThirdMove(fourthMove)
                }} />

这是样式化的组件部分，我想我传递道具时出错了！！！

export const Gauge = styled.img<{animation: () => {}}>`
    width: 30%;
    height: auto;
    position: absolute;
    top: 64%;
    left: 48%;
    animation: ${(props) => props.animation} 3s;
    transform-origin: 10% 54%;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    /* animation-delay: 2s; */
`;

export const gaugeRotation = (firstMove: number, secondMove: number, thirdMove: number, fourthMove: number) => keyframes`
    0%   {transform: rotate(${firstMove}deg); }
    35% {transform: rotate(${secondMove}deg);}
    50% {transform: rotate(${thirdMove}deg);}
    100% {transform: rotate(${fourthMove}deg);}
`;

jsx 一切正常 但是当我将其转换为 tsx 时，我收到了错误

Answer 1

我在这里找到了解决方案

样式组件错误“看起来有一个未知的 prop“responsive”被发送到 DOM，这可能会触发 React 控制台错误。”

我将 styled-components 降级到版本 5：

npm install styled-components@5