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

Question

当我将鼠标悬停在Ant Design的Rate组件中的星星上时，它的大小会增加，而当鼠标移出时，它会恢复为原始大小。这可能是由于组件中固有的transform: scale(x)引起的。如果我将鼠标悬停在星星上，我想停止这种动画/行为。我该如何实现？我在devtools中尝试了不同的element state，但失败了。

我可以设置自定义width和height，但找不到能阻止该动画/变换的东西：/。 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

此处要隔离的关键类是.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，因为它们对应于完全填充，空和半填充的星星。您正确地假设它是transform: scale(x);。通过少量测试，您可以找到合适的比例值（奇怪的是.91是最无缝的）。我还必须更改transition，因为根元素在某种程度上可以进行反比例缩放，但是会出现短暂的“反弹”，即从尝试缩放到强制缩放的过渡下。

这是更新code sandbox。下面是更新的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);
  }

实际上我前段时间也写了一篇博客文章，其中我写了blog post关于我自己的使用香草JS，CSS和HTML的自定义星级系统的信息，如果您对更容易自定义的内容感兴趣的话：） 。