Question

我正在使用样式化组件。
我有2个元素（Element，Parent）和1个动画myCoolAnimation，仅当Element具有Parent时，我才想绑定到active

类似这样的东西：

const myCoolAnimation = keyframes`
    /* some keyframes */
`;

const Element = styled.div`
    /* some styles */
`;

const Parent = styled.div`
   opacity: 0;
   ${({active}) => active && `
      opacity: 1;
      & ${Element} {
         animation: ${myCoolAnimation} 8s ease-in-out -4s infinite;
      }
   `}
`;

它抛出此错误：

错误：看来您正在将关键帧声明（SomeClass）插入未加标签的字符串中。样式组件v3支持此功能，但v4不再支持此功能，因为现在可以按需注入关键帧。 请将您的字符串包装在css``帮助器中，以确保正确注入样式。

因此，我尝试将Parent.active Element样式移至css()。像这样：

const myCoolAnimation = keyframes`
    /* some keyframes */
`;

const Element = styled.div`
    /* some styles */
`;

// this is how I understood the error message
const elementActiveCss = css`
   animation: ${myCoolAnimation} 8s ease-in-out -4s infinite;
`;

const Parent = styled.div`
   opacity: 0;
   ${({active}) => active && `
      opacity: 1;
      & ${Element} {
         ${elementActiveCss};
      }
   `}
`;

但是错误仍然相同。我应该如何解决呢？

顺便说一句。我知道我可以使用类似animation-play-state: paused的东西并直接在Element定义中初始化动画，但是我想理解这个错误。

样式化组件，内插关键帧声明

0 个答案: