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