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

Posted 2023-03-27

【中文标题】如何更改蚂蚁设计中的单选按钮颜色？

【英文标题】：How to change radio button color in ant design?

【发布时间】：2020-10-17 22:52:38

【问题描述】：

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

有什么办法吗？

【参考方案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 内，但它对我有用。

【讨论】：

我们是否需要在我们的代码中引用该类，否则它会被自己提取。请查看我的帖子，看看您是否可以提供帮助。 ***.com/questions/63799078/…

@Pabblo13 改变单选项目的文本颜色怎么样？