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

Posted 2023-03-15

【中文标题】在不工作之前使用样式化组件并将道具传递给伪元素

【英文标题】：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;
`;

【参考方案1】：

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

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

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

【讨论】：

完美，谢谢