vue开发,如何简单快速修改vant组件的内部样式
简单快速修改vant组件的内部样式
·
在使用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;
}
更多推荐
已为社区贡献1条内容
所有评论(0)