這裏以Element UI爲例
方法一:
在需要的 el 組件上增加自己的class
比如,需要設置el-dialog的body背景色和高度
.seller {
.el-dialog__body{
background-color: #f5f5f5;
height: 100%;
}
}
又比如,這個seller下有兩個dialog,一個全屏希望高度和背景色自定義,而非全屏的不自定義,那麼可以如下
.seller{
.is-fullscreen{
.el-dialog__body{
background-color: #f5f5f5;
height: 100%;
}
}
}
或者
循環遍歷.is-fullscreen等
.seller /deep/ .is-fullscreen .el-dialog_body{
background-color: #f5f5f5;
height: 100%;
}
方法二:
全局的 element-ui 樣式修改可以在 @/src/styles/element-ui.scss 中進行設置修改。
方法三:
使用深度作用選擇器,還是已上述爲例,表示會對seller下的所有el-dialog_body執行樣式
.seller >>>. el-dialog__body{
background-color: #f5f5f5;
height: 100%;
}
方法四
有些預處理器( Sass 之類的預處理器無法正確解析 >>>)。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名,同樣可以正常工作。
.seller /deep/ . el-dialog__body{
background-color: #f5f5f5;
height: 100%;
}
總結
用的最多的還是第一種,而且最合適,>>>和 /deep/都是深度遍歷所有的符合情況的標籤。建議第一種能用的就別用其他的
千里之行
始於足下