vue中修改elementUI,vant 样式(样式穿透的三种方法)

在vue项目中，当我们在使用第三方组件库（element-ui、vant）时，遇到需要修改组件中第三方组件库中的样式，但同时又不想去除scoped属性造成组件之间的样式覆盖，这时，我们就可以使用样式穿透来解决这个问题样式穿透的方式通过>>>穿透scoped当Sass、Less之类的预处理器无法解析>>>，可以使用/deep/或者::v-deep/deep/ 在l

悄悄努力

3058人浏览 · 2022-04-01 11:53:58

悄悄努力 · 2022-04-01 11:53:58 发布

在vue项目中，当我们在使用第三方组件库（element-ui、vant）时，遇到需要修改组件中第三方组件库中的样式，但同时又不想去除scoped属性造成组件之间的样式覆盖，这时，我们就可以使用样式穿透来解决这个问题

样式穿透的方式

通过>>>穿透scoped

当Sass、Less之类的预处理器无法解析>>>，可以使用/deep/或者::v-deep

/deep/ 在less中使用
::v-deep 在scss中使用

案例：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^