Conditionally add pseudo-class on hover

Question

I am trying to use styled-components and I need a way to conditionally add a pseudo-class on hover.

Here is an example of my code:

buildRating(numberRating, totalRating) {
  const Star = styled.div`
    display: inline;

    div&:hover:before {
      color: ${Colors.goldColor};
    }
    &:before {
      unicode-bidi: bidi-override;
      direction: ltr;
      content: '\\2605';
      color: ${props =>
        props.hasColorStar ? Colors.goldColor : Colors.blackColor};
    }
  `;

  const ratings = [];
  for (let i = 0; i < totalRating; i++) {
    ratings.push(
      i < numberRating ? <Star key={i} hasColorStar /> : <Star key={i} />,
    );
  }
  return ratings;
}

Now the above styled-component will generate:

/* sc-component-id: sc-iwsKbI */
.sc-iwsKbI {
}
.NnxkP {
  display: inline;
}
div.NnxkP:hover:before {
  color: #f6a128;
}
.NnxkP:before {
  unicode-bidi: bidi-override;
  direction: ltr;
  content: "\2605";
  color: #363636;
}

/* sc-component-id: sc-gZMcBi */
.sc-gZMcBi {
}
.dBzcSQ {
  display: inline;
}
div.dBzcSQ:hover:before {
  color: #f6a128;
}
.dBzcSQ:before {
  unicode-bidi: bidi-override;
  direction: ltr;
  content: "\2605";
  color: #f6a128;
}

I don't want it to generate:

div.dBzcSQ:hover:before {
  color: #f6a128;
}

Is there a way to use the below styled-component

div&:hover:before {
   color: ${Colors.goldColor};
}

when props.hasColorStar is true?

Is there a way of accomplishing this with styled-components?

Thai Duong Tran · Accepted Answer · 2018-06-14 05:31:34Z

1

If you have a props hasColorStar and want to conditional apply the style based on it, you can do something as below:

 const Star = styled.div`
    ...
    ${({ hasColorStar }) => hasColorStar && `
      div&:hover:before {
        color: ${Colors.goldColor};
      }
    `}
    ...
 `;

answered Jun 14, 2018 at 5:31

Thai Duong Tran

2,54214 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

null_pointer Over a year ago

Putting a template literal inside a template literal looks very strange and it seems to confuse VSCode with formatting. However, it works!

Thai Duong Tran Over a year ago

It does confuse VSCode, however, it's pretty common when it comes to styled-components or other css-in-js library that based on string literal such as emotion. If you want to give it a better format, move the function out of the string literal and assign it to a constant.

null_pointer Over a year ago

Great idea moving it to it's own variable. I'll also check out emotion because i've never heard of it.

Collectives™ on Stack Overflow

Conditionally add pseudo-class on hover

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related