在Vue中使用deep深度選擇器修改element UI組件的樣式
在項(xiàng)目當(dāng)中我們常常會(huì)使用到 Element UI 組件庫來進(jìn)行快速開發(fā)，但是組件在引入之后它都會(huì)有官方默認(rèn)的樣式，有些情況我們需要修改它的樣式。
方法一（不推薦）：使用class
為要修改的這個(gè)組件標(biāo)簽設(shè)置一個(gè) class 類名，然后在 <style></style> 標(biāo)簽中設(shè)置樣式。但要注意這種方式必須是在全局下才會(huì)生效，也就是說 <style></style> 標(biāo)簽中不能用 scoped 屬性。
<style> </style>
Tip：當(dāng) <style> 標(biāo)簽中有 scoped 屬性時(shí)，它的 CSS 只作用于當(dāng)前組件中的元素，不會(huì)影響其子組件。也就是實(shí)現(xiàn)了組件的私有化，不對(duì)全局造成樣式污染。
需要注意的是，<style>標(biāo)簽如果沒有 scopd 屬性，可能會(huì)造成其他組件樣式的錯(cuò)亂，所以該方式不推薦。
方法二：使用 deep 深度選擇器
同樣為要修改的這個(gè)組件標(biāo)簽設(shè)置一個(gè) class 類名，并在 <style></style> 標(biāo)簽中設(shè)置樣式，但是保留 <style> 標(biāo)簽的 scoped 屬性；
<style scoped> </style>
深度選擇器的寫法可以用 /deep/ 或者 >>> ；區(qū)別是 >>> 在 less 語法下不可用，/deep/ 則全部適用。
舉例：修改 el-input 的樣式；
<el-input class="txt" v-model="user" placeholder="請(qǐng)輸入用戶名">
<i slot="suffix" style="display: flex;align-items: center;">
<img
class="icon"
src="/static/login_new/login_icon_account_hig.png"
alt=""/>
</i>
</el-input>初始樣式如下，輸入框?yàn)橹苯牵?/p>
接下來我們通過 CSS 用普通的類選擇器來修改它為圓角；
<style scoped>
.txt {
border-radius: 2.64rem !important;
}
</style>樣式不會(huì)生效；
使用深度選擇器，格式如下；
<style scoped>
.txt /deep/ .el-input__inner {
border-radius: 2.64rem !important;
}
</style>樣式修改成功；
到此這篇關(guān)于在Vue中如何修改element UI組件的樣式（deep 深度選擇器）的文章就介紹到這了,更多相關(guān)Vue修改element UI組件的樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3.0使用mapState,mapGetters和mapActions的方式
這篇文章主要介紹了vue3.0使用mapState,mapGetters和mapActions的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)tab切換的放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了使用element upload上傳組件如何去掉刪除按鈕2023-07-07
Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法
在el-form表單組件中el-input組件輸入內(nèi)容后按下Enter鍵刷新了整個(gè)頁面,下面這篇文章主要給大家介紹了關(guān)于Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法,需要的朋友可以參考下2024-03-03
element中table高度自適應(yīng)的實(shí)現(xiàn)
這篇文章主要介紹了element中table高度自適應(yīng)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
vue實(shí)現(xiàn)富文本編輯器詳細(xì)過程
Vue富文本的實(shí)現(xiàn)可以使用一些現(xiàn)成的第三方庫,如Quill、Vue-quill-editor、wangEditor等,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)富文本編輯器的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue.js框架路由使用方法實(shí)例詳解的相關(guān)資料,這里提供實(shí)例幫助大家學(xué)習(xí)理解這部分內(nèi)容，需要的朋友可以參考下2017-08-08
vue實(shí)現(xiàn)右鍵點(diǎn)擊彈框信息功能
這篇文章主要介紹了vue實(shí)現(xiàn)右鍵點(diǎn)擊彈框信息功能方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
vue實(shí)現(xiàn)新聞?wù)故卷摰牟襟E詳解
最近小編遇到這樣的需求，要實(shí)現(xiàn)一個(gè)新聞?wù)故卷摴δ埽瑒偨拥竭@樣的需求還真是一頭霧水，不知從哪入手，今天小編通過實(shí)例代碼給大家介紹下vue實(shí)現(xiàn)新聞?wù)故卷摰牟襟E詳解，感興趣的朋友跟隨小編一起看看吧2019-04-04
this.$nextTick是在下次dom更新循環(huán)之后執(zhí)行延遲回調(diào),在修改數(shù)據(jù)之后立即使用這個(gè)方法,獲取更新后的dom,下面這篇文章主要給大家介紹了關(guān)于Vue中this.$nextTick()的理解與使用的相關(guān)資料,需要的朋友可以參考下2022-02-02