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中樣式覆蓋問題怎么解決”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。