React+TS+Styled Components向keyframes传参做条件动画报错如何解决？

两个问题的核心原因完全相同：你在keyframes的模板字符串插值中额外嵌套了一层无意义的箭头函数，styled-components不会自动执行这层嵌套函数，只会将其作为值转换为字符串处理，因此同时触发了类型报错和异常的打印结果。

• 类型报错：你向CSS属性插值传入了函数类型的值，而styled-components期望的是字符串/数值等可直接拼接为CSS的类型，因此触发了TS类型不匹配的错误。
• 控制台打印异常：嵌套的函数没有被实际执行，你看到的object是函数被转为字符串后的异常输出，自然也无法展开查看props的具体内容。

修正方案 #

直接删掉keyframes模板插值中包裹逻辑的外层箭头函数即可，hoverAnimate函数已经接收了props参数，可以直接在逻辑中使用。更推荐提前把需要的动画属性值计算完成后再传入模板，代码可读性和可维护性更高。

修正后代码示例 #

import styled, { keyframes } from "styled-components";
import {
  PRIMARY,
  SECONDARY,
  DANGER,
  TEXT,
  OUTLINE,
} from "../../constans";

interface PropTypes {
  color?: string;
  variant?: string;
  size?: string;
  shadow?: boolean;
  disabled?: boolean;
  hoverAnimation?: boolean;
}

const StyledButton = styled.button<PropTypes>`
  // [... SOME CODE ...]
  animation: ${(props) => hoverAnimate(props)} 2s infinite;
`;

const hoverAnimate = (props: PropTypes) => {
  // 提前计算动画终点属性，避免模板内嵌套复杂逻辑
  const endColor = props.variant 
    ? (props.color ? `var(--color-${props.color})` : "#444")
    : "#fff";

  const endBg = props.variant === TEXT || props.variant === OUTLINE
    ? "#f00"
    : props.color === PRIMARY
      ? "var(--color-primary)"
      : props.color === SECONDARY
        ? "var(--color-secondary)"
        : props.color === DANGER
          ? "var(--color-danger)"
          : "var(--color-default)";

  return keyframes`
    100% {
      color: ${endColor};
      background: ${endBg};
    }
  `;
};

内容的提问来源于stack exchange，提问作者Soiloui