uni-app 之微信小程序中 radio 和checkbox颜色设置不起作用

今天，由于业务需要，设置了checkbox和radio。为了配合整体页面的样式，令选择框为紫色。

<view class="flex flex-direction bg-white">
    <label >
        <radio color="#FF00FF"></radio>1
    </label>
    <label>
        <checkbox color="#FF00FF"></checkbox>2
    </label>
</view>

然而，这两个控件的颜色在微信小程序中，不起作用。

 当然，在H5页面，发挥了它本来的颜色。

后来，才知道是因为样式冲突引起的。打开App.vue。发现项目使用了默认的colorUI的样式。

 注释红框内的两行代码。发现在微信小程序中，页面的radio和checkbox能够更加需要变化。

 

 

 故，因为样式冲突，radio和checkbox默认不可显示的解决方法有两个。

• 注释或修改引起冲突的引用样式。
• 使用另一个页面的radio样式。例如，在colorUI中可用这样写checkbox或radio控件的代码。

<view class="flex flex-direction bg-white">
    <label >
        <radio class="purple" ></radio>1
    </label>
    <label>
        <checkbox class="purple"></checkbox>2
    </label>
</view>