如何为antd 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 编写了我自己的自定义星级评分系统 :)。