如何为antd Rate Component设置自定义样式

Question

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
}

Answer 1

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:).

Answer 2

You can style inline on the component:

<Rate style={{ color: '#00c' }}>

Answer 3

You don't need to complicate the things here. You can simply use fontSize property as follows which will allow you resizing the icon's size -

<Rate disabled defaultValue={3} style={{ color: "black", fontSize:10 }} />