這裡以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...