在Vue中使用deep深度選擇器修改element UI組件的樣式
在項目當(dāng)中我們常常會使用到 Element UI 組件庫來進(jìn)行快速開發(fā)，但是組件在引入之后它都會有官方默認(rèn)的樣式，有些情況我們需要修改它的樣式。
方法一（不推薦）：使用class
為要修改的這個組件標(biāo)簽設(shè)置一個 class 類名，然后在 <style></style> 標(biāo)簽中設(shè)置樣式。但要注意這種方式必須是在全局下才會生效，也就是說 <style></style> 標(biāo)簽中不能用 scoped 屬性。
<style> </style>
Tip：當(dāng) <style> 標(biāo)簽中有 scoped 屬性時，它的 CSS 只作用于當(dāng)前組件中的元素，不會影響其子組件。也就是實現(xiàn)了組件的私有化，不對全局造成樣式污染。
需要注意的是，<style>標(biāo)簽如果沒有 scopd 屬性，可能會造成其他組件樣式的錯亂，所以該方式不推薦。
方法二：使用 deep 深度選擇器
同樣為要修改的這個組件標(biāo)簽設(shè)置一個 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="請輸入用戶名">
<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>初始樣式如下，輸入框為直角；
接下來我們通過 CSS 用普通的類選擇器來修改它為圓角；
<style scoped>
.txt {
border-radius: 2.64rem !important;
}
</style>樣式不會生效；
使用深度選擇器，格式如下；
<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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
圖片裁剪功能無論是用戶頭像的裁剪,還是圖片內(nèi)容的精確調(diào)整,都成為了提升用戶體驗的關(guān)鍵一環(huán),本文將詳細(xì)介紹如何在Vue.js項目中集成并使用Cropper.js實現(xiàn)一個強大的圖片裁剪組件,需要的可以參考下2024-11-11
本文為大家介紹Vue中路由的使用方法,包括安裝路由創(chuàng)建路由并導(dǎo)出以及在應(yīng)用實例中使用vue-router的相關(guān)知識,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-02-02
本篇文章主要介紹了web前端vue之CSS過渡效果示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue組件中修改組件外元素樣式,本文給大家分享兩種解決方案幫助大家解決這樣的問題，結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
Vue $emit()不能觸發(fā)父組件方法的原因及解決
這篇文章主要介紹了Vue $emit()不能觸發(fā)父組件方法的原因及解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue+axios+promise實際開發(fā)用法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
本文主要介紹了Vue中使用Lodash的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue組件之 高德地圖地址選擇功能的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
從Echarts報錯中學(xué)習(xí)Vue3?ref和shallowRef區(qū)別及其組件二次封裝demo
這篇文章主要介紹了從Echarts報錯中學(xué)習(xí)Vue3?ref和shallowRef區(qū)別及其組件二次封裝demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue的事件綁定與方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08