快捷導(dǎo)航

element-ui中樣式覆蓋問題的方法總結(jié)

更新時(shí)間：2023年03月30日 09:20:12 作者：@李優(yōu)秀

我們在使用element-ui的時(shí)候經(jīng)常會遇到需要修改組件默認(rèn)樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui中樣式覆蓋問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在企業(yè)項(xiàng)目的實(shí)際開發(fā)中，組件所提供的樣式有時(shí)是不能夠完全滿足實(shí)際的需求樣式，比如：內(nèi)外邊距、組件背景色與原型圖不符合等等。這時(shí)候我們就需要通過修改組件的內(nèi)置Class值或者Id值來實(shí)現(xiàn)目的效果。

所以，我總結(jié)了以下幾種樣式深度覆蓋的方法來提供參考：

! important

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

實(shí)例：

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

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

三者都起到了樣式深度覆蓋的作用，但>>>只作用與css,因?yàn)?strong>sass/less的話可能無法識別，這時(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)以上兩種情況無法實(shí)現(xiàn)樣式深度覆蓋時(shí)，就需要新建一個(gè)<style></style>標(biāo)簽，進(jìn)行樣式覆蓋。這是因?yàn)榕c<style></style>標(biāo)簽中scoped屬性沖突了，但你如果不使用scoped會導(dǎo)致組件樣式全局化。這時(shí)候就可以新建一個(gè)<style></style>標(biāo)簽來存放想要深度覆蓋的標(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值是一致的）。