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

I have the follwing styled component, I am trying to pass a prop to it and use it in a pseudo element selector, in this case before. However, it does not work as expected.

However, if I pass the same prop to the background css property or any other property, it works completely fine

Is the following allowed when using styled components?

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;
`;

CodePudding user response：

If you check devtools, you'll see that your CSS rule is making it to the DOM, but it's an invalid value for the content property. It's raw text, with no quotes: Hi. It needs to be "Hi".

Try doing (notice the backticks for a new template string literal):

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