element UI 元件樣式修改小坑

2021-10-01 22:43:14 字數 589 閱讀 7520

今天在修改element-ui元件樣式的時候,因為自己疏忽踩了乙個小坑導致浪費了不少時間特此記錄一下。

在使用側邊導航欄的時候,發現ele預設設定了20px的左內邊距。

起初我忽略了權重問題,沒有注意到此項樣式是採用的行內樣式設定的,結果在通過各種類選擇器修改通通失敗的情況下,發現了問題的所在。

這裡再回顧下各選擇器的權重:

這個時候由於我們通過類選擇器的方式設定樣式權重小於行內樣式都會被覆蓋掉,就會倒是不管何種方法都修改失敗。此時就需要我們引入!iimportant來提公升當前樣式的權重,此時再通過樣式穿透的方法就可以成功覆蓋掉ele預設的行內樣式了。

目前ele樣式都可以自定義修改了,以後如果再遇到什麼奇葩的坑再來補充

修改Element ui元件的樣式無效?

less 分頁器元件 el pagination style 2,只想在某個頁面修改元件樣式,同樣檢視元件類名,假如類名是 hover row,他的父級容器是你自己寫入的dom,類名是 box,然後在style標籤下寫 前提是你的css預處理是less less scoped hover row元件...

修改elementUI元件樣式無效的問題研究

問題背景 el tabs的選項卡預設字型是14px,大了,想改成12px,結果在style裡面加樣式總是不生效。panel content el tabs item.is top 原理分析 在vue元件中我們經常需要給style新增scoped來使得當前樣式只作用於當前元件的節點。新增scoped之...

element ui 元件分頁器用法 修改樣式

一下是element ui 元件裡面的乙個 data showlist.slice currpage 1 pagesize,currpage pagesize style width 1000px expand props left inline class demo table expand 商品...