前言

在企业项目的实际开发中，组件所提供的样式有时是不能够完全满足实际的需求样式，比如：内外边距、组件背景色与原型图不符合等等。这时候我们就需要通过修改组件的内置Class值或者Id值来实现目的效果。

所以，我总结了以下几种样式深度覆盖的方法来提供参考：

! important

CSS 中的 ! important 规则用于增加样式的权重。! important 与优先级无关，但它与最终的结果直接相关，使用一个 ! important 规则时，此声明将覆盖任何其他声明。

实例：

.myclass {
  background-color: gray !important;
}

>>>、/deep/、::v-deep

三者都起到了样式深度覆盖的作用，但>>>只作用与css,因为sass/less的话可能无法识别，这时候需要使用 /deep/和::v-deep 选择器。

实例：

<style scoped>
>>> .title{
        color: #ff0;
    }
</style>
 
<style scoped lang="scss">
/deep/ .title{
        color: #ff0;
    }
::v-deep .title{
        color: #ff0;
    }
</style>

新建一个<style></style>标签

当以上两种情况无法实现样式深度覆盖时，就需要新建一个<style></style>标签，进行样式覆盖。这是因为与<style></style>标签中scoped属性冲突了，但你如果不使用scoped会导致组件样式全局化。这时候就可以新建一个<style></style>标签来存放想要深度覆盖的标签样式（一个.vue文件允许多个style）。

<style >
.new_dialog .el-dialog {
    background-color: #E4E7ED;
    min-width:1104px;  
}
</style>
 
<style scoped>
.el-divider--horizontal {
    margin: 8px 0;
    background: 0 0;
    border-top: 1px dashed #e8eaec;
}
</style>

注意：

需要注意的是，你需要重新给你想要深度覆盖的标签赋予新的class值，以防样式渲染到其他界面的相同组件（使用element-ui的话，每个界面的所使用的组件的class值是一致的）。

总结