如何更改蚂蚁设计中的单选按钮颜色？

Question

我正在使用 antd 收音机和复选框。我想给他们自定义颜色。我找到了有关复选框的答案，但找不到更改单选按钮颜色的方法。

有什么办法吗？

Answer 1

您可以通过覆盖以下 css 类来实现它：

.ant-radio-checked .ant-radio-inner{
  border-color: red !important ;
}

.ant-radio-checked .ant-radio-inner:after{
  background-color: red;
}

.ant-radio:hover .ant-radio-inner {
  border-color: red ;
}

第一个块负责为收音机中圆点周围的圆圈着色。您可以忽略 !important 规则，但随后您必须覆盖 :focus 选择器，例如：

.ant-radio-checked .ant-radio-inner:focus{
  border-color: red;
}

第二个块为所选单选框中间的点着色。悬停时的最后一个色环。我不完全确定为什么 ant-radio-inner 应该在 radio:hover 内，但它对我有用。