Styled-components – Se generaron más de 200 clases, pero no puedo hacer que :hover funcione.

Me encontré con un error en styled-components:

Se generaron más de 200 clases para el componente……

Luego hice el arreglo sugerido desde la consola, lo cual funcionó, pero cuando tengo un componente contenedor “Card” que al pasar el mouse por encima debería cambiar el color del texto de otro componente “Number” (al que se le aplicó dicho arreglo sugerido), entonces no puedo cambiar el color (supongo que porque el estilo anula el cambio al pasar el mouse, ya que funciona bien con opacidad).

Los componentes mencionados están en src/ProgressPieCard (los primeros 2 componentes).

¿Alguien tiene alguna sugerencia? Gracias de antemano 🙂

(lo siento, el estilo/posición está un poco desordenado)

Enlace a CodeSandBox: https://codesandbox.io/s/zen-burnell-hsveq?file=/src/ProgressIndicatorCardPage/ProgressPieCard/styled.ts

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

const Card = styled.div.attrs<ColorProps>((props) => ({
  style: {
    background: props.color,
  },
}))<code>
  position: relative;
  &amp;:hover {
    ${Number} {
      opacity: 0.5;
      // color: red;  &lt;-- esto no funciona
    }
  }
</code>;