cssreactjsantd

How to set custom style to antd Rate Component

When I mouse over a star in Ant Design's Rate component it's size increases and on mouse out it goes back to the original size. This is probably due to an innate transform: scale(x) in the component. I want to stop this animation/behaviour of stars if I mouse over them. How can I achieve that? I have tried different element state in devtools but failed.

I'm able to set custom width and height but I can't find something which can stop that animation/transform :/ . code 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
}

enter image description here

Solution

  • The key classes to isolate here are .ant-rate-star.ant-rate-star-full, .ant-rate-star.ant-rate-star-zero, and .ant-rate-star.ant-rate-star-half.ant-rate-star-active as these correspond to the fully filled, empty, and half filled stars. You're right to assume it was transform: scale(x);. With a little testing you can find the right scale value (oddly enough .91 was the most seamless). I also had to change the transition since the root element had some sort of transition where the counter scaling would work but there would be a short period of 'bounce' where it was transitioning from the attempted scale up to the forced scale down.

    Here is the update code sandbox. Below is the updated CSS.

      .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);
  }

    I actually also wrote a blog post a while back where I wrote a blog post about my own custom star rating system with vanilla JS, CSS and HTML if you're interested in something a bit more easily customizeable :).