element-ui中樣式覆蓋問(wèn)題怎么解決

今天小編給大家分享一下element-ui中樣式覆蓋問(wèn)題怎么解決的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

! important

CSS 中的 ! important 規(guī)則用于增加樣式的權(quán)重。! important 與優(yōu)先級(jí)無(wú)關(guān)，但它與最終的結(jié)果直接相關(guān)，使用一個(gè) ! important 規(guī)則時(shí)，此聲明將覆蓋任何其他聲明。

實(shí)例：

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

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

三者都起到了樣式深度覆蓋的作用，但>>>只作用與css,因?yàn)?strong>sass/less的話可能無(wú)法識(shí)別，這時(shí)候需要使用 /deep/和::v-deep 選擇器。

實(shí)例：

<style scoped>
>>> .title{
        color: #ff0;
    }
</style>
 
<style scoped lang="scss">
/deep/ .title{
        color: #ff0;
    }
::v-deep .title{
        color: #ff0;
    }
</style>

新建一個(gè)<style></style>標(biāo)簽

當(dāng)以上兩種情況無(wú)法實(shí)現(xiàn)樣式深度覆蓋時(shí)，就需要新建一個(gè)<style></style>標(biāo)簽，進(jìn)行樣式覆蓋。這是因?yàn)榕c<style></style>標(biāo)簽中scoped屬性沖突了，但你如果不使用scoped會(huì)導(dǎo)致組件樣式全局化。這時(shí)候就可以新建一個(gè)<style></style>標(biāo)簽來(lái)存放想要深度覆蓋的標(biāo)簽樣式（一個(gè).vue文件允許多個(gè)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>

注意：

需要注意的是，你需要重新給你想要深度覆蓋的標(biāo)簽賦予新的class值，以防樣式渲染到其他界面的相同組件（使用element-ui的話，每個(gè)界面的所使用的組件的class值是一致的）。

以上就是“element-ui中樣式覆蓋問(wèn)題怎么解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。