【uni-app】深度作用选择器解决修改checkbox样式无效问题

uni-app表单多项选择器需要使用内置组件checkbox，具体使用见官网链接，如下：

官方给出h5端的默认样式是这样的：

现在需要修改样式为这样：

于是开始修改：

<checkbox-group @change="checkboxChange">
    <label class="radio">
	    <checkbox :value="item+''" class="checkbox"/>
	    <image :src="item.imgUrl" class="friend-avator"></image>
	    view class="friend-name">{
   
   {item.name}}</view>
	</label>
</checkbox-group>
......

<style scoped>
    .checkbox:active{
	    border: 2rpx solid #24c023 !important;
	    background-color: #24c023 !important;
	    color: #FFFFFF !important;
    }
    ......
<style>

添加的样式无法实现最终效果，即使添加了!important修饰依旧无效。

随后发现既然checkbox是内置组件，那么一定要通过checkbox组件内的类名或id名修改样式，于是在开发者工具中找到了内置的类名。

但修改后依旧无法实现......

此时要留意的是，当前组件的style标签是被一个叫scoped的属性修饰的

<style scoped>
    ......
<style>

需要解决此问题，先要明白组件的style标签添加scoped属性后，当前组件的所有子元素标签都会统一添加一个如data-v-xxxx的自定义属性，最终浏览器会以该属性为属性选择器匹配样式，在css所有选择器的最后添加，如下图，目的是为了防止当前组件和子组件或其它组件存在重复的class名发生冲突，这样即便你的项目两个组件使用了相同的类名，但它们分别匹配了两个组件不同的属性选择器，从而类名就不会冲突了。

为了保险起见，这个项目里的style标签全部用scoped属性进行了修饰。

所以想在父组件中修改子组件的样式，直接通过子组件的类名是无效的，要实现样式穿透，需要使用深度作用选择器，在子组件中的类名前添加 >>> ，如下：

/* checkbox样式 */
>>> uni-checkbox .uni-checkbox-input{
	margin-right: 0;
	border-radius: 50% ;
	border: 2rpx solid #828181 ;
}
/* 取消选中后的样式 */
>>> uni-checkbox:not([disabled]) .uni-checkbox-input:hover{
	border: 2rpx solid #828181;
}
/* 选中时的样式 */
>>> uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{
	border: 2rpx solid #24c023 !important;
	background-color: #24c023 !important;
	color: #FFFFFF !important; 
}

如果不添加深度作用选择器，开发者工具中根本无法查看到我们对checkbox组件做修改的样式

添加了深度作用选择器后，编译时会在checkbox组件内部类名前添加当前组件的属性选择器，由于优先级高，从而覆盖掉checkbox组件内的默认样式，如下图：

样式生效~~~

总结一下，深度作用选择器的写法

原生css 使用 >>>

less 使用 /deep/

sass 使用 :v-deep

实际上不仅是uni-app的checkbox组件，对于所有第三方组件、自定义组件，或是vue开发的pc端网页应用等，这类问题的解决方法皆亦如此。

但是......以为就这么结束了？？？

emmm......当打开小程序开发者工具调试，发现在浏览器中生效的样式根本没有生效

审核元素发现在小程序开发者工具中，checkbox组件是被黑盒封装的，根本无法查看组件内部的类名，也就是说无法知晓修改的类名具体情况了。

于是查阅资料发现，小程序平台checkbox组件实际内部类名和h5端不一致（类名及代码如下），所以，若要兼容多平台需要写两套不同类名的样式，同时配合uni-app中的条件注释实现跨端兼容，通过在代码外层包裹条件注释，当ifdef后面的平台类型是MP-WEIXIN，代表下列代码只会在微信小程序端生效，其它平台不会执行：

/* ifdef MP-WEIXIN */
/*checkbox 选项框大小  */
>>> checkbox .wx-checkbox-input {
  border-radius: 50% !important;
  /* background-color: #FFFFFF; */
  border: 2rpx solid #828181 !important;
}
/*checkbox选中后样式  */
>>> checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  border: 2rpx solid #24c023 !important;
  background-color: #24c023 !important;
  color: #FFFFFF !important;
}
/*checkbox选中后图标样式  */
>>> checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  color: #FFFFFF !important;
}
/* endif */

关于条件注释，如果还不是很明白，可以查看：条件编译解决各端差异 - uni-app官网 (dcloud.io)

【uni-app】深度作用选择器解决修改checkbox样式无效问题

猜你喜欢