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