如何在蚂蚁设计中更改单选按钮颜色? [英] How to change radio button color in ant design?

问题描述

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

I'm using antd radios and checkboxes. I want to give custom colors to them. I found answer about checkbox but found no way to change radio button color.

有什么办法吗?

推荐答案

您可以通过覆盖以下 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 选择器，例如:

First block is responsible for coloring the circle around the dot in radio. You can ignore !important rule but then you have to override :focus selector like:

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

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

Second block color the dot in the middle of selected radio. The last one color circle on hover. I am not completely sure why ant-radio-inner should be inside radio:hover, but it works for me.

这篇关于如何在蚂蚁设计中更改单选按钮颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！