uniapp修改radio的样式

uniapp原生的radio是有样式的，勾勾样式

• radio的默认颜色，在不同平台不一样。微信小程序是绿色的，字节跳动小程序为红色，其他平台是蓝色的。更改颜色使用color属性。

 用官网的实例来，源码如下：

<radio-group @change="radioChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
					<view>
						<radio :value="item.value" :checked="index === current" />
					</view>
					<view>{{item.name}}</view>
				</label>
			</radio-group>

js代码如下：

export default {
    data() {
        return {
            items: [{
                    value: 'USA',
                    name: '美国'
                },
                {
                    value: 'CHN',
                    name: '中国',
                    checked: 'true'
                },
                {
                    value: 'BRA',
                    name: '巴西'
                },
                {
                    value: 'JPN',
                    name: '日本'
                },
                {
                    value: 'ENG',
                    name: '英国'
                },
                {
                    value: 'FRA',
                    name: '法国'
                },
            ],
            current: 0
        }
    },
    methods: {
        radioChange: function(evt) {
            for (let i = 0; i < this.items.length; i++) {
                if (this.items[i].value === evt.detail.value) {
                    this.current = i;
                    break;
                }
            }
        }
    }
}

 但是我需要远点样式。于是更改方式如下

修改 radio 的样式要在 App.vue 中修改

​
    /* radio 选中后的样式 */
	uni-radio .uni-radio-input.uni-radio-input-checked{
		background-color: #248067!important;
		border-color: #248067!important;
		background-clip: content-box!important;
		padding: 6rpx!important;
		box-sizing: border-box;
	}
	
	/* radio 选中后的图标样式*/
	uni-radio .uni-radio-input.uni-radio-input-checked::before{
		display: none!important;
	}

​

当然害怕污染其他地方的，可以在修改的地方用/deep/来在所在文件修改 

/deep/.uni-radio-input-checked{
			background-color: #248067!important;
					border-color: #248067!important;
					background-clip: content-box!important;
					padding: 6rpx!important;
					box-sizing: border-box;
		}
/deep/.uni-radio-input-checked::before{
		display: none!important;
}

建议写到该radio框所在的容器view里面