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