vue 组件不受全局样式影响_Vue——解决使用第三方组件库时无法修改默认样式的问题(使用 /deep/ )...

最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库。使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的。

一、基础(了解 的 scoped 属性)

在编写Vue代码过程中,为了不让父组件相同样选择器名称设置的样式影响到子组件,我们往往会给 标签设置 scoped 属性。但是如果设置了scoped属性,在该组件内的 Css 就只能作用于当前组件中的元素。

实际上,它是通过使用 PostCSS 来实现以下转换:

hi

.example {

color: red;

}

转换为:

hi

.example[data-v-f3f3eg9] {

color: red;

}

当然,我们也可以混合地使用本地样式和全局样式:

/* 全局样式 */

/* 本地样式 */

关于子组件根元素的样式结果,还需要单独叙述一下:

使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。

二、问题(使用第三方组件库时修改默认样式)

接下来,就介绍和解决一下,使用第三方组件库时遇到的问题——无法修改默认样式。

在项目中使用 element-ui 组件库,设置样式时发现根本无法覆盖掉默认样式,开始我也以为是选择器的权重问题,后来发现,无论怎么加类名,样式都无法生效。现在提供如下的解决方案:

使用深度作用选择器:如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符:

.a >>> .b {

/* 需要设置给子组件b的样式 */

color: red;

}

上述代码将会编译成:

.a[data-v-f3f3eg9] .b {

/* 需要设置给子组件b的样式 */

color: red;

}

但是,有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名,同样可以正常工作。

.a /deep/ .b {

/* 需要设置给子组件b的样式 */

color: red;

}

如果使用了上面的 /deep/ 后发现样式依然没有生效,那么就给它再来个最高权重( !important ):

.a /deep/ .b {

/* 需要设置给子组件b的样式 */

color: red !important;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值