Question

有人知道样式化组件的正确语法是什么吗？

const TextWithDropCap = styled.div`
    ${(props: TextProps) => props.hasDropCap && `
        & > p:first-child:first-letter {
            float: left;
            font-size: calc(${themeHelper(theme.text.size.10)} * 3)
            lineHeight: calc(${themeHelper(theme.text.size.15)} * 3)
        }
    `};
`;

因为现在它不求值内部函数，而是仅将其呈现为字符串。这是样式化组件为其生成的css：

.NbsOb > p:first-child:first-letter{
    float:left;
    font-size:calc(function (styledComponentProps) {
         return exports.getThemeProp(styledComponentProps,propertyPath);
    }
     * 3);
    lineHeight:calc(function (styledComponentProps) {
         return exports.getThemeProp(styledComponentProps,propertyPath);
    }
     * 3);
}

Answer 1

您的样式化组件语法有点错...

尝试一下：

const TextWithDropCap = styled.div`
    ${props => props.hasDropCap && css`
        & > p::first-letter  {
            float: left;
            font-size: calc(${themeHelper(theme.text.size.10)} * 3)
            lineHeight: calc(${themeHelper(theme.text.size.15)} * 3)
        }
    `}
`;

查看本文以获取更多信息： https://blog.alexdevero.com/introduction-styled-components/ https://www.styled-components.com/

希望这会有所帮助

样式化组件中的嵌套函数

1 个答案: