今天小编给大家分享一下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中样式覆盖问题怎么解决”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
