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

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 的引号内

示例：

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

请注意，我正在利用 ES6 新功能，其中单个语句函数无需使用大括号

{}

和

return

。

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

Answer 2

我所做的是使用 css 辅助函数：

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

Answer 3

styled-components 与 sass 中的工作方式相同，没有什么不同

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

`;

我是 // 渲染：“我是 🦄”

参考自 与样式组件一起使用伪类之前和之后