样式没生效？使用css样式穿透

一、背景

• 明明设置了样式，页面却没有按照预想的展示
• 明明加了 !important,却没有任何作用，覆盖不了默认的样式；

二、问题分析

• 你写的样式有语法问题么？
  • 答案是没有
• 那为什么没有生效？
  • 因为你修改的不是目标元素，或者说你修改了个寂寞
  • 比如你想修改第三方ui组件的样式：

<style scope>
.EL_Dialog .el-dialog .el-dialog__header{
	background-color: cyan !important;
}
.EL_Dialog .el-dialog__footer{
	background-color: cyan !important;
}
</style>

• 实际最后渲染的生成的是

<style>

.EL_Dialog .el-dialog .el-dialog__header[data-v-9ad4a878]{
	background-color: cyan !important;
}
.EL_Dialog  .el-dialog__footer[data-v-9ad4a878]{
	background-color: cyan !important;
}

</style>

• 所以，您设置的不是.el-dialog__footer，而是一个元素具有属性.el-dialog__footer且有data-v-9ad4a878的属性，显然UI框架里没有这个的，这个防止样式污染加的额外的属性，可以理解为作用域。

三、问题解决： 通过样式穿透（多种方式，任君挑选）

<style>
.EL_Dialog >>> .el-dialog__body{
	background-color: cyan !important;
}


.EL_Dialog /deep/ .el-dialog__footer{
	background-color: cyan !important;
}	

.EL_Dialog ::v-deep .el-dialog__footer{
	background-color: skyblue !important;
}	


/***vue3 */
.EL_Dialog  ::v-deep(.el-dialog .el-dialog__header) {
	background-color: cyan !important;
}

/***vue3 */
.EL_Dialog  :deep(.el-dialog .el-dialog__header) {
	background-color: skyblue !important;
}
</style>

• 最终的渲染结果

<style>
.EL_Dialog[data-v-9ad4a878] .el-dialog .el-dialog__header {
    background-color: skyblue !important;
}

.EL_Dialog[data-v-9ad4a878] .el-dialog .el-dialog__header {
    background-color: cyan !important;
}
</style>