如何在样式组件中动态呈现内容之前的伪

Question

我在样式组件中动态渲染内容时遇到了麻烦.

难道我做错了什么？

我静态地在内容之前渲染伪时没有问题,但是当我动态地尝试它时它不起作用.

反应组件

const Test = (props) => {

    return (
        <Text before={12345}>
            {props.children}
        </Text>
    );

};

样式组件(不起作用)

const Text = styled.span`

    &:before {
        content: ${props => {
            console.log(props.before); // I see '12345' in log.
            return props.before;
            }
    }


`;

样式组件(这很好)

const Text = styled.span`

    &:before {
        content: '12345'
    }


`;

Answer 1

那是因为content值必须在css中的引号内

这是工作的CSS

const Block = styled.div`
    &:before {
        display: absolute;
        top:0;
        content: '${props => props.before}'
    }
`

请注意,我正在利用ES6的新功能,其中单个语句功能不需要使用花括号{}和return.

Codepen:https://codepen.io/metju/pen/zEKeOm