修改element样式 覆盖子组件样式方法 样式穿透

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