react-radio-group修改样式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaileilei1/article/details/83302732

相信有不少人遇到过这个问题，想用 React-radio-group 表单组件的时候，发现他的样式都是固定写好的，官网里面也没有给定参数去修改选中/未选中的状态。

他的默认样式是这样的：

去查阅很多资料都无法修改。后来在审查元素的时候看到这个 input[type="radio" i]。就想着能不能修改他的样式呢？

然后，就尝试修改了这个元素的样式：

input[type='radio' i] {
    appearance:none;// appearance 属性允许您使元素看上去像标准的用户界面元素,清除默认样式
     -moz-appearance: none;
    background: rgb(100,100,100);
    border-radius: 50%;
    background-size: 12px 12px;
    width: 12px;
    height: 12px;
    margin-right: 20px;
    outline: none; //去除radio的默认选中的边框
}
input[type='radio']:checked {
    appearance:none;// appearance 属性允许您使元素看上去像标准的用户界面元素,清除默认样式
     -moz-appearance: none;
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEZC_nW47AuHKOt6wzihVSi2atDztKfGIYVtEvEN-0QhW8ZsZ_2w'); //自定义图片样式
    background-size: 12px 12px;
    width: 12px;
    height: 12px;
    margin-right: 20px;
}

 改变后的效果：

如果要改变选中状态的效果，只需要改变 input[type='radio']:checked 的样式

找资料找了很多天，终于修改成功了。希望对之后用到的朋友们有帮助~。另外，之后再遇到这种问题，一定要多审查元素。尝试做修改。

最后感谢这位作者  https://blog.csdn.net/qq_34973481/article/details/79670922