如何在带有样式组件的伪元素上传递道具？答案

【问题标题】：How to pass props on Pseudo-elements with styled components?如何在带有样式组件的伪元素上传递道具？
【发布时间】：2020-06-06 23:05:56
【问题描述】：

更具体地说，我需要在content:" " 上传递道具的帮助这是我的例子：

  &::after {
  content: "test";
  color: ${props => props.color};
  background: ${props => (props.bg ? "green" : "blue")};
}

这是组件：

   <StyledBox bg="red" color="green" text="webpack">
      <Webpack />
    </StyledBox>

如果我在内容中传递此内容不起作用：

${props => props.text}

知道解决方案是什么吗？

【问题讨论】：

【解决方案1】：

哇...我不确定这是否是正确的语法和解决方案，但如果我用这样的引号将内容道具包装起来，它就可以工作：

content:'${props => props.text}';

【讨论】：