在不工作之前使用样式化组件并将道具传递给伪元素答案

【问题标题】：Using Styled Components and passing props to psedo element before not working在不工作之前使用样式化组件并将道具传递给伪元素
【发布时间】：2022-01-21 18:16:42
【问题描述】：

我有以下样式的组件，我试图将一个道具传递给它并在伪元素选择器中使用它，在本例中为before。但是，它并没有按预期工作。

但是，如果我将相同的道具传递给背景 css 属性或任何其他属性，它完全可以正常工作

使用样式组件时是否允许以下操作？

const Label = styled.label`
  /* This did not work */
  &::before {
    content: ${(props) => (props.field ? "Hi" : "")};
  }
  /*But this works perfectly fine*/
  background: ${(props) => (props.field ? "palevioletred" : "white")};
`;

const Input = styled.input`
  height: 32px;
`;

【问题讨论】：

标签： css styled-components

【解决方案1】：

如果您检查 devtools，您会看到您的 CSS 规则正在进入 DOM，但它对于 content 属性是无效值。这是原始文本，没有引号：Hi。必须是"Hi"。

尝试做（注意新模板字符串文字的反引号）：

content: ${(props) => (props.field ? `"Hi"` : "")};

【讨论】：

完美，谢谢