Styled-components – Over 200 classes were generated, but cant get :hover to work


I came across the error in styled-components :

Over 200 classes were generated for component……

and did the suggested fix from console, and that did the trick, but when I have a container component "Card" that when hovered should change text color of another component "Number" (which has that suggested fix applied, then I cant change the color (i assume because style overrides the hover change, because it works fine with opacity)

the mentioned components are in src/ProgressPieCard (first 2 components)

anyone got any got suggestions, thanks in advance 🙂

( sorry styling/position is a bit off )

CodeSandBox

const Number = styled.p.attrs<ColorProps>((props) => ({
  style: {
    color: props.color,
  },
}))`
  position: absolute;
  span {
    font-size: 1.5rem;
  }
`;

const Card = styled.div.attrs<ColorProps>((props) => ({
  style: {
    background: props.color,
  },
}))`
  position: relative;
  &:hover {
    ${Number} {
      opacity: 0.5;
      // color: red;  <-- this dont work
    }
  }
`;

Source: CSS – Stack Overflow

November 23, 2021
Category : News
Tags: css | reactjs | styled-components

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.