覆蓋一些元件庫自己的樣式

2021-10-05 07:25:09 字數 951 閱讀 9249

這裡以element ui為例

方法一:

在需要的 el 元件上增加自己的class

比如,需要設定el-dialog的body背景色和高度

.seller 

}

又比如,這個seller下有兩個dialog,乙個全屏希望高度和背景色自定義,而非全屏的不自定義,那麼可以如下

.seller

}}

或者

迴圈遍歷.is-fullscreen等

.seller /deep/

.is-fullscreen .el-dialog_body

方法二:

全域性的 element-ui 樣式修改可以在 @/src/styles/element-ui.scss 中進行設定修改。

方法三:

使用深度作用選擇器,還是已上述為例,表示會對seller下的所有el-dialog_body執行樣式

.seller >>>

. el-dialog__body

方法四

有些預處理器( sass 之類的預處理器無法正確解析 >>>)。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名,同樣可以正常工作。

.seller /deep/

. el-dialog__body

總結

用的最多的還是第一種,而且最合適,>>>和 /deep/都是深度遍歷所有的符合情況的標籤。建議第一種能用的就別用其他的

千里之行

始於足下

覆蓋元件庫樣式style

這兩天在使用element ui寫頁面時,想要在檔案內部修改element ui元素的style,但沒能成功,最後發現犯了乙個低階錯誤,然後通過深度選擇器實現了檔案內元素style的覆蓋,但深度選擇器並不推薦使用。之後偶然發現,原因是修改的style未放在自定義的element ui類名下,導致無法...

一些自己遺忘的Css樣式

1.首行縮排 text indent 50px 2.內容自動換行 word break break all 允許在單詞內部進行換行 word break keep all 只在空格處或連字元 處換行3.詞間距 word spacing 10px 單詞與單詞之間的間隙為10px,只要有空格出現就認為是...

常用的一些樣式

一 文字溢位打點 超出省略號 1 單行溢位打點 2 單行溢位打點,以2行為例 規定顯示2行並且超出部分顯示.多行文字溢位打點 text overflow ellipsis line clamp 2 webkit line clamp 2 display webkit box 設定盒子為伸縮盒 ove...