element-ui中样式覆盖问题的方法总结

前言

在企业项目的实际开发中，组件所提供的样式有时是不能够完全满足实际的需求样式，比如：内外边距、组件背景色与原型图不符合等等。这时候我们就需要通过修改组件的内置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值是一致的）。

总结

到此这篇关于element-ui中样式覆盖问题的文章就介绍到这了,更多相关element-ui样式覆盖问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！