在Vue中修改组件库的样式-deep深度选择器

前言：在项目开发的过程中，我们会将Vue项目和element-ui进行结合使用，但是如果element-ui的样式有时不符合我们的需求时，这时就需要修改它的样式，此时就需要用到深度选择器。解决方案：1、style为css时，使用 >>>2、style为css的预处理器（less,sass,scss）时，可以使用 /deep/和 ::v-deep<style lang="cs

锦鲤儿

3055人浏览 · 2022-02-16 10:32:27

锦鲤儿 · 2022-02-16 10:32:27 发布

前言：在项目开发的过程中，我们会将Vue项目和element-ui进行结合使用，但是如果element-ui的样式有时不符合我们的需求时，这时就需要修改它的样式，此时就需要用到深度选择器。
解决方案：
1、style为css时，使用 >>>
2、style为css的预处理器（less,sass,scss）时，可以使用 /deep/和 ::v-deep

<style lang="css">
        >>> .active{
        
        }
</style>

<style lang="scss">
        /deep/ .active{

        }
        ::v-deep .active{
            
        }
</style>

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}$/, //不连续的两位字母// /^