Css selectors in the rating component

[guidelli]

In the Rating component there is a rule that uses the important exception

[`.${rootClassName} &:hover ~ label`]: {
  color: `${colors.gray20} !important`,
},

I think I found better rules whitout such exception. Sorry, those are writen in styled-components library rather than in emotion:

const Container = styled.div`
  display: flex;
  > * {
    padding: 0 2px;
    :last-child {
      padding-right: 0;
    }
    :first-child {
      padding-left: 0;
    }
  }
  ${({ rating }) =>
    css`
      color: ${rating === -1 ? grey : orange};
    `}

  > label:hover ~ label > svg {
    color: ${grey};
  }
  input:checked ~ label {
    color: ${grey}
  }
  input:checked + label {
    color: ${orange}
  }
  :hover > label > svg {
    color: ${orange};
  }
`;

The container component above is the stars container div.

[kentcdodds]

Awesome, thanks for the tip @guidelli. Because the videos are already recorded with the alternative I'm going to leave it as-is, but if I update this in the future I'll try your recommendation out :)