大家好,欢迎来到IT知识分享网。
样式穿透
- 样式穿透
- 1. 为什么需要样式穿透
- 1.1 为什么样式会失效
- 2. 如何使用样式穿透
- 2.1 实例
1. 为什么需要样式穿透
-
在开发中引入了第三方组件库(如element-ui),但又想要修改第三方组件库中组件的样式。
组件库中的组件往往都有自己的样式,有时在开发中需要做出一定的调整。但是由于scoped的问题,有时对组件的样式修改会失效。而一旦去掉scoped,又会导致各种组件之间样式覆盖,此时就需要使用样式穿透了
-
需要明确一点:并不是所有第三方组件库组件的样式修改都需要样式穿透 (详情请看下文)
1.1 为什么样式会失效
-
为什么有时在修改第三方组件样式时,样式不生效?为什么有时又能直接修改?
/*无效*/ .el-dialog { width: 100%; } /*有效*/ .el-input { width: 198px; }
产生问题的原因很大程度上与scoped有关
-
scoped的原理
scoped底层是通过在
DOM节点
中添加data-v-xxx
,CSS
中通过添加[data-v-xxx]
属性过滤,提高优先级,来实现样式的私有化。也就是说,上面两种组件的运行代码在scoped的作用下实际上长这样:
- el-input
- el-dialog
由此可以看出一个问题,那就是
el-dialog__wrapper
下面的子组件并没有被scoped添加标记,也就是说scoped内的样式并没有对它们生效。但是对于el-input
,scoped成功对它添加了标记,设置的样式也就能对它生效了 -
那么在什么情况下scoped会添加标记呢
scoped在渲染的时候,如果组件内部还有子组件,只会在父组件,以及子组件的根元素加上
data-v-xxx
属性
2. 如何使用样式穿透
-
less写法
/deep/ .el-table__body-wrapper { cursor: pointer; }
-
scss写法
::v-deep .el-table::before { background-color: transparent; }
2.1 实例
我想要修改element-ui中breadcrumb(面包屑)的字体颜色
直接修改el-breadcrumb__item
的字体颜色是不行的,因为字体颜色属性存在于子组件el-breadcrumb__inner
之中,因为scoped的影响无法直接修改它的样式,所以只能使用样式穿透
.header-container {
.l-content {
/deep/.el-breadcrumb__item {
.el-breadcrumb__inner {
font-weight: normal;
&.is-link {
color: #666;
}
}
&:last-child {
.el-breadcrumb__inner {
color: #fff;
}
}
}
}
}
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/28002.html