关于样式穿透

背景： 在使用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>

<template>
    <div class="box" data-v-fabc90cc>divBox</div></template>
<style>
.box[data-v-fabc90cc] {
  width: 100px;
  height:100px;
  background:blue;
}
</style>

我们看到元素后面被加上了[data-v-xxxxxxxx]属性，这也就是CSS的属性选择器，只有拥有这个属性的元素或类才会应用此样式。因此会导致前文的问题，解决方式可以使用样式穿透

使用样式穿透（深度作用选择器）

所谓样式穿透，就是在父级组件中强制去修改子级组件的内部样式，注意这里的父子层次并不一定是一级，可能是很多级。 具体不同的css渲染器写法不同

• 普通CSS语法：
  • 在要修改的样式前添加 >>> 符号

.wrapper >>> .el-card__header{
    border:none;
}

• scss 语法
  • 在要修改的样式前添加 ::v-deep

::v-deep .el-card__header{
    border:none;
}

• sass/less语法：
  • 在要修改的样式前添加 /deep/

.wrap /deep/ .el-card__header{
    border:none;
}