CODEWITHSUNDEEP
javascriptreactjsstyled-components
zb22
zb22

Reputation: 3231

styled-components content condition doesn't work

I'm using styled-components and I'm tried to add a simple condition like this:

const Wrapper = styled.section`
  padding: 4em;
  
  ::after {
   content: ${1 ? 'a' : 'b'};
  }
`;

But it doesn't do anything at all.
when inspecting the DOM after wasn't there.

Tried also this:

...
content: ${1 && 'a'};
...

but still, nothing happened.

How can I use a condition and return the string that I want for the content css rule ?

Upvotes: 1

Views: 36

Answers (1)

lissettdm
lissettdm

Reputation: 13078

You are missing & before the after seudo selector and "" to wrap the content value. Should be:

const Wrapper = styled.section`
  padding: 4em;
  
  &::after {
    content: "${1 ? 'a' : 'b'}";
  }
`;

Upvotes: 1

Related Questions