vue中强制覆盖第三方css的方式,强制/深度穿透。 >>>和 /deep/ 深度作用选择器

5,471 阅读1分钟

建议使用 /deep/

官方文档都这么说了那我们就这样用呗。

vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过 >>>, 穿透scoped。 或者不适用scoped,给外面起个独一无二的类名。让它只在相应的组建内样式有效。推荐使用FeHelper

这个工具挺好用,json比对。。。。。 我在项目中使用到的深度穿透方式使用的如下: 自己的样式如下:

如果项目中使用到了sass有时候不起作用,使用网络上查到的,如果是不支持less或者sass的前提下。两者都可以

.class{ width: 100px; /deep/.children{ width: 200px; } }

/deep/ + 自己要修改的class{自己的样式}

这种深度选择器的例子:

两种实现方案,两钟心得。

在使用scss得时候也可以使用

.parent {
    ::v-deep .el-input{
        height: 20px;
        width: 200px;
    }
}

同样可以达到效果!