antd Radio组件,样式小问题

5,707 阅读1分钟

引入antdRadio组件,使用disabled的情况下(Radio.Group中第二个为默认选中)。会出现蓝色border。

import { Radio } from 'antd'

 <Radio.Group disabled defaultValue="b" size="large">
    <Radio.Button value="a">Hangzhou</Radio.Button>
    <Radio.Button value="b">Shanghai</Radio.Button>
    <Radio.Button value="c">Beijing</Radio.Button>
    <Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>

效果如图(放大一定倍数),发现默认选中,左侧border有蓝色背景。(不清晰,但是可以发现一点点)

蓝色可能不太明显,换成红色试试看

可见,处理非disabledcss的样式,被应用到了当前情况下。

修改:

.ant-radio-button-wrapper-checked.ant-radio-button-wrapper-disabled:not(:first-child)::before {
    background-color: #d9d9d9 !important;
}

如图,可见问题解决

偏右老哥给的回答,人家已经修复了。