在使用vant组件库开发时,一些组件的样式并不能满足我们开发的需求,比如字体颜色,列表间距等。下面以复选框van-checkbox-group的使用为列:

需求:当checkbox 设置属性disabled 时,组件默认文字是灰色的,我们需要改成黑色的

在van-checkbox的使用中,文档中列出的可设置样式并没有修改disabled时的文字颜色的样式,我们通过查看知道当设置了disabled这个属性时,此时的文字颜色样式是用   

van-checkbox__label--disabled

我们如果直接修改这个样式里的颜色是并不起作用的,因为我们引用样式的时候,默认为scoped,这个属性是为了防止全局同名CSS污染,此时我们只需要在这个样式前面加上/deep/,/deep/可以对组件内的样式进行覆盖,如下及可修改复选框设置不可编辑后的文字颜色了

/deep/ .van-checkbox__label--disabled{

        color: #333333;

}

Logo

前往低代码交流专区

更多推荐