element-ui中样式覆盖问题怎么解决

今天小编给大家分享一下element-ui中样式覆盖问题怎么解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

! 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值是一致的）。

以上就是“element-ui中样式覆盖问题怎么解决”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。