如何在 Ant Design 中更改单选按钮的颜色？

Question

我正在使用 antd 的单选框和复选框，希望能够自定义它们的颜色。在搜索中找到了如何更改复选框颜色的答案，但却没有找到更改单选框按钮颜色的方法。

是否有任何方法可以实现这个需求？

- Ali Ahmad

Answer 1

你可以通过覆盖以下 CSS 类来实现它：

You can achive it by overriding following css classes:

.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选择器，如下所示：

第一块是负责给单选按钮中的点周围的圆圈染色。您可以不理会!important规则，但这样您就必须覆盖:focus选择器，例如：

```css input[type="radio"]:focus::before { border-color: your_color; } ```

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

第二个块中间的选中单选按钮的圆点变色。最后一个在鼠标悬停时颜色变化。我不确定为什么ant-radio-inner应该放在radio:hover内，但这对我有用。

- Pabblo13

---

我们的代码中是否需要引用该类，还是它会自动被识别。请查看我的帖子，看看你能否在那里提供帮助。https://stackoverflow.com/questions/63799078/ant-design-button-color-update - Sarah

@Pabblo13，更改单选按钮文本的颜色怎么样？ - Chervin Tanilon

内部点周围但在外部周长内的环怎么样？ - Embedded_Mugs