您似乎正在将关键帧声明 (hVshE) 插入到未标记的字符串中

问题描述

大家晚上好，样式组件库有一个错误，我无法更正:

Good evening everyone, I have an error with the styled-component library that I can't correct:

错误:您似乎正在插入关键帧声明 (hVshE)成一个未标记的字符串.这在 styled-components v3 中得到支持，但在 v4 中不再支持，因为现在注入了关键帧一经请求.请将您的字符串包裹在 css`` 帮助器中，以确保样式被正确注入.看https://www.styled-components.com/docs/api#css

错误是在我进行分配时:

the error is when I make the assignment:

const CardInner = keyframes`
                
                    flex: 1;
                    display: ${Card.display};
                    text-align: ${Card.textAlign};
                    transition: ${duration};
                    transform-style: preserve-3d;
            
                    ${
                      Card.checkLimit && Card.checkLimitFlag
                        ? css`
                            animation: ${tmp} ${duration} ${fillMode};
                          `
                        : Card.checkLimit === false && Card.checkLimitFlag
                        ? css`
                            animation: ${tmp1} ${duration} ${fillMode};
                          `
                        : ""
                    }  
                     
  `;

我该如何解决?

这是示例项目

推荐答案

您可以将标记模板文字转换为等效的标记函数.

You can convert the tagged template literal to the tag function equivalent.

来源: 未将无穷大识别为有效关键字 #247

const fadeIn = keyframes`...`

// EQUIVALENT TO: css`${fadeIn} 0.2s linear;`
const animationRule = css(
  (['', ' 0.2s linear;'] as any) as TemplateStringsArray,
  fadeIn
)

const StyledDiv = styled.div`
  animation: ${animationRule}
`

这篇关于您似乎正在将关键帧声明 (hVshE) 插入到未标记的字符串中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！