Вложенная функция в стилизованных компонентах

Кто-нибудь знает, какой правильный синтаксис для стилизованных компонентов?

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);
}

reactjs react-props styled-components
person Ales    schedule 22.08.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ваш синтаксис стилизованных компонентов немного не работает ...

попробуй это:

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/

Надеюсь это поможет

person Martín Zaragoza    schedule 22.08.2018