CODEWITHSUNDEEP
cssstyled-components
ssaquif
ssaquif

Reputation: 330

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

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

Upvotes: 1

Views: 1302

Answers (1)

Lynden Noye
Lynden Noye

Reputation: 1011

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"` : "")};

Upvotes: 3

Related Questions