Uniapp 修改内置组件样式无效解决方法

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;
        }
    }