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

IT技术 css reactjs antd
2021-05-10 09:43:26

当我将鼠标悬停在 Ant DesignRate组件中的星星上时，它的大小会增加，鼠标移开时它会恢复到原始大小。这可能是由于transform: scale(x)组件的先天性。如果我将鼠标悬停在星星上，我想停止这些星星的动画/行为。我怎样才能做到这一点？我element state在 devtools 中尝试过不同的但失败了。

我可以设置自定义width，height但我找不到可以阻止动画/转换的东西：/。代码沙箱

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

在此处输入图片说明

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因为根元素有某种转换，在这种转换中，计数器缩放可以工作，但会在短时间内从尝试缩放过渡到强制缩放。

这是更新代码沙箱。下面是更新后的 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);
  }

我实际上还写了一篇博文，在那里我写了一篇关于我自己的自定义星级系统的博客文章，使用 vanilla JS、CSS 和 HTML，如果您对更容易定制的东西感兴趣:)。

其它你可能感兴趣的问题
上一篇尝试在 react native 中的 flatlist 中声明变量时出现意外标记 下一篇将应用程序从 react-azure-adb2c 移植到 react-aad