element 组件本身的样式直接设置就可以
组件下子组件的样式修改需要样式穿透
覆盖子组件方法:
可在浏览器 devtool 中查看对应类名
使用 vue 样式穿透
scoped
时需要用到样式穿透/deep/
或>>>
<style scoped>
.el-card /deep/ .el-card__header {
padding: 0;
}
</style>
- ==sass等预编译不支持/deep/==: 可使用
>>>
或::v-deep
参考博客
vue3 需要使用:deep()
为什么样式难覆盖?
有一些 element-ui 组件会产生脱离当前从属结构的DOM元素,比如el-dialog会在body中插入一段html,这个dom就属于当前组件的子组件了,因而deep的方法就不会生效。
设置属性使其插入到组件上,element-ui 使用 popper-append-to-body
;element-plus 使用 teleported