Uniapp 修改內置組件樣式無效解決方法

例如 修改 CheckBox 樣式
DOM 結構如下

<uni-checkbox data-v-9437ae50="" class="checkbox" style="transform: scale(0.8);">
    <div class="uni-checkbox-wrapper">
        <div class="uni-checkbox-input uni-checkbox-input-checked" style="color: rgb(13, 28, 74);"></div>
    </div>
</uni-checkbox>

 

如果要覆蓋 uni-checkbox-input uni-checkbox-input-checked 的樣式, 直接寫不會生效.

解決方法:

1. 寫到 App.vue 公共樣式中

2. 使用 深度作用選擇器
   這種方法不會污染全局
   https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html
   css 中使用
   .a >>> .b
   less 中使用
   .a /deep/ .b

.checkbox >>> .uni-checkbox-input {
}

 

.checkbox {
        /deep/ .uni-checkbox-input {
            border-radius: 50%;
            border-width: 2px;
        }

        /deep/ &:not([disabled]) .uni-checkbox-input{
            border-color: #0d1c4a;
        }
    }