element-ui中樣式覆蓋問(wèn)題的方法總結(jié)
前言
在企業(yè)項(xiàng)目的實(shí)際開(kāi)發(fā)中，組件所提供的樣式有時(shí)是不能夠完全滿足實(shí)際的需求樣式，比如：內(nèi)外邊距、組件背景色與原型圖不符合等等。這時(shí)候我們就需要通過(guò)修改組件的內(nèi)置Class值或者Id值來(lái)實(shí)現(xiàn)目的效果。
所以，我總結(jié)了以下幾種樣式深度覆蓋的方法來(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值是一致的）。
總結(jié)
到此這篇關(guān)于element-ui中樣式覆蓋問(wèn)題的文章就介紹到這了,更多相關(guān)element-ui樣式覆蓋問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue使用pdf.js和docx-preview實(shí)現(xiàn)docx和pdf的在線預(yù)覽
這篇文章主要為大家詳細(xì)介紹了在Vue中使用pdf.js和docx-preview實(shí)現(xiàn)docx和pdf的在線預(yù)覽的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),需要的可以參考下2025-03-03
Vue 中自定義文件上傳組件的實(shí)現(xiàn)代碼
在Vue項(xiàng)目中,自定義文件上傳組件能夠提升用戶交互體驗(yàn)和界面控制,樣式可根據(jù)需求定制,在其他組件中引用時(shí),可以進(jìn)一步擴(kuò)展功能,如文件類型限制和上傳進(jìn)度條,本文給大家介紹Vue 中自定義文件上傳組件的實(shí)現(xiàn)代碼,感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要詳細(xì)介紹了在vue3中如何選取頭像并裁剪，文章中有詳細(xì)的代碼示例，需要的朋友可以參考閱讀2023-04-04
vue樹(shù)形結(jié)構(gòu)獲取鍵值的方法示例
這篇文章主要介紹了vue樹(shù)形結(jié)構(gòu)獲取鍵值的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
這篇文章主要介紹了vue中@keyup.enter失效問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
使用vue-router切換頁(yè)面時(shí)實(shí)現(xiàn)設(shè)置過(guò)渡動(dòng)畫
今天小編就為大家分享一篇使用vue-router切換頁(yè)面時(shí)實(shí)現(xiàn)設(shè)置過(guò)渡動(dòng)畫。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue中嵌入可浮動(dòng)的第三方網(wǎng)頁(yè)窗口的示例詳解
本文介紹了在Vue2項(xiàng)目中嵌入可浮動(dòng)的第三方網(wǎng)頁(yè)窗口的實(shí)現(xiàn)方法,包括使用iframe、div+script和dialog元素等方式,并提供了一個(gè)實(shí)戰(zhàn)Demo,展示了如何在Vue組件中動(dòng)態(tài)加載和控制浮窗的顯示,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了vue 源碼解析 --虛擬Dom-render的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
Vue2+marked.js實(shí)現(xiàn)AI流式輸出的項(xiàng)目實(shí)踐
本文主要介紹了Vue2+marked.js實(shí)現(xiàn)AI流式輸出的項(xiàng)目實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04
vue實(shí)現(xiàn)循環(huán)滾動(dòng)圖片
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)循環(huán)滾動(dòng)圖片，多圖片輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07