Cómo configurar un estilo personalizado para el componente de tarifa antd

2022-12-01 06:24:57

Cuando paso el mouse sobre una estrella en Rate componente, su tamaño aumenta y al sacar el mouse vuelve al tamaño original. Esto probablemente se deba a un transform: scale(x) innato en el componente. Quiero detener esta animación/comportamiento de las estrellas si paso el mouse sobre ellas. ¿Cómo puedo lograr eso? Probé diferentes element state en devtools pero fallé.

Puedo configurar width y height personalizados, pero no puedo encontrar algo que pueda detener esa animación/transformación :/ . código sandbox

.ant-rate-star.ant-rate-star-full i svg {
  width: 15px;
  height: 20px;
  margin: -3.5px;
}
.ant-rate-star.ant-rate-star-zero i svg {
  width: 15px;
  height: 20px;
  margin: -3.5px;
}
.ant-rate-star.ant-rate-star-half.ant-rate-star-active i svg {
  width: 15px;
  height: 20px;
  margin: -3.5px;
}

.ant-rate-star.ant-rate-star-full i svg:hover {
  transform: scale(1); //not working
}

ingrese la descripción de la imagen aquí

- blueseal

Source
zh
Responder


1
  • Las clases clave que se deben aislar aquí son .ant-rate-star.ant-rate-star-full, .ant-rate-star.ant-rate-star-zero y .ant-rate-star.ant-rate-star-half.ant-rate-star-active, ya que corresponden a las clases completas , estrellas vacías y medio llenas. Tienes razón al asumir que fue transform: scale(x);. Con un poco de prueba, puede encontrar el valor de escala correcto (por extraño que parezca, .91 fue el más fluido). También tuve que cambiar el transition ya que el elemento raíz tenía algún tipo de transición en la que funcionaría la escala del contador, pero habría un período corto de 'rebote' en la transición de la escala intentada hasta la escala forzada hacia abajo.

    Aquí está la actualización code sandbox. A continuación se muestra el CSS actualizado.

      .ant-rate-star.ant-rate-star-full,
      .ant-rate-star.ant-rate-star-zero,
      .ant-rate-star.ant-rate-star-half.ant-rate-star-active {
          transition: transform 0s;
      }
    
      .ant-rate-star.ant-rate-star-half.ant-rate-star-active:hover {
          transform: scale(0.91);
      }
    
      .ant-rate-star.ant-rate-star-full:hover {
          transform: scale(0.91);
      }
    
      .ant-rate-star.ant-rate-star-zero:hover {
          transform: scale(0.91);
      }
    

    De hecho, también escribí una publicación de blog hace un tiempo donde escribí un publicación de blog sobre mi propio sistema personalizado de clasificación por estrellas con JS, CSS y HTML estándar si está interesado en algo un poco más fácil de personalizar :).