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

! important

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

实例：

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

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

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

实例：

>>> .title{
        color: #ff0;
    }

 

/deep/ .title{
        color: #ff0;
    }
::v-deep .title{
        color: #ff0;
    }

新建一个标签

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

.new_dialog .el-dialog {
    background-color: #E4E7ED;
    min-width:1104px;  
}

 

.el-divider--horizontal {
    margin: 8px 0;
    background: 0 0;
    border-top: 1px dashed #e8eaec;
}

注意：

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