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 的样式, 直接写不会生效.
解决方法:
-
写到 App.vue 公共样式中
-
使用 深度作用选择器
这种方法不会污染全局
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;
}
}