样式穿透
# 关于样式穿透
背景:
在使用fullcalendar
开发日历时,需要设置当前日期之前的日期样式为灰色,在控制台检索后发现过去的日期会有fc-day-past
的类名,
在vue的开发过程中,style标签往往是这样的 <style lang='less' scoped>
,且想要在组件中直接赋予fullcalendar包含的类名样式并不会生效
# scoped
首先了解style标签中的scoped属性:
- 当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,这样就可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了组件的私有化,样式的模块化。
# scoped的实现原理
vue中的scoped属性的效果主要通过PostCSS转译实现。 通过观察渲染的DOM结构可以发现,scoped在DOM结构以及css样式上加了唯一的标记,使样式唯一且只作用于含有该属性的dom——组件内部dom
- 转译前
<template>
<div class="box">divBox</div>
</template>
<style scoped>
.box {
width: 100px;
height:100px;
background:blue;
}
</style>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<template>
<div class="box" data-v-fabc90cc>divBox</div></template>
<style>
.box[data-v-fabc90cc] {
width: 100px;
height:100px;
background:blue;
}
</style>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
我们看到元素后面被加上了[data-v-xxxxxxxx]属性,这也就是CSS的属性选择器,只有拥有这个属性的元素或类才会应用此样式。因此会导致前文的问题,解决方式可以使用样式穿透
# 使用样式穿透(深度作用选择器)
所谓样式穿透,就是在父级组件中强制去修改子级组件的内部样式,注意这里的父子层次并不一定是一级,可能是很多级。 具体不同的css渲染器写法不同
- 普通CSS语法:
- 在要修改的样式前添加 >>> 符号
.wrapper >>> .el-card__header{
border:none;
}
1
2
3
2
3
- scss 语法
- 在要修改的样式前添加 ::v-deep
::v-deep .el-card__header{
border:none;
}
1
2
3
2
3
- sass/less语法:
- 在要修改的样式前添加 /deep/
.wrap /deep/ .el-card__header{
border:none;
}
1
2
3
2
3
编辑 (opens new window)
上次更新: 2021/11/29, 19:58:04