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

Question

我有以下样式的组件，我正在尝试将道具传递给它并在伪元素选择器中使用它，在本例中为 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;
`;

Answer 1

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

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

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

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

Using Styled Components and passing props to psedo element before not working

css

styled-components