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>