这里以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/都是深度遍历所有的符合情况的标签。建议第一种能用的就别用其他的
千里之行
始于足下