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

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

这是因为const Block = styled.div` &:before { display: absolute; top:0; content: '${props => props.before}' } ` 值必须在css

中的引号内

这是工作CSS

{}

请注意，我正在利用ES6 new features，其中单个语句函数不需要使用花括号return和{{1}}。

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

Answer 2

样式组件与sass中的组件相同，没有什么不同

const Text = styled.span`
    &:before {
       content: ${props => !!props.before ? props.before : " "};
    }

`;

我是//渲染：＆＃34;我是＆＃34;

参考文献摘自 Before and After pseudo classes used with styled-components

Answer 3

我所做的是使用css helper函数：

const Text = styled.span`
  &:before {
     ${props => !!props.before ?
      css`content: props.before;` : css`content: ' '';`
     };
  }
`