修改elemet-ui组件的内部样式

版权声明：来自清心的博客 https://blog.csdn.net/jw2268136570/article/details/88666716

实例：修改el-dialog的el-dialog__body的样式

如果我们使用了element-ui的el-dialog组件，面临修改组件内的样式（例如修改el-dialog__body的样式）的需求，这是博主总结的三种思路。

第一种思路：添加类名（与组件渲染结果有关，可能失败（如下例））

我们尝试在el-dialog组件上添加样式类来达到层叠样式的目的。如下例的dialog-select类名

<el-dialog title="信息查看" :visible.sync="selectFormVisible" :close-on-click-modal="false"   class="dialog-select">
            ....
            </el-dialog>
               

结果：失败，我们审查元素发现

这里我们发现element-ui的el-dialog组件渲染了三层，而我们添加的dialog-select样式出现在了最外层div，无法层叠el-dialog__body的样式。所以说，我们无法通过为el-dialog添加样式类来层叠其内层的div的样式。

第二种思路：组件内不使用scoped（不推荐）

如果组件内取消使用scoped来进行局部样式保护，那么直接层叠扩展内层的div样式即可。但要注意你在该组件定义的所有样式将会作用到全局，会留有隐患，尤其是常用的类名和复用组件内的类名。

第三种思路：依然使用scoped，使用深度选择器（推荐）

参考vue文档中vue loader部分

<style lang="scss" scoped>
  .dialog-wrapper {
    /deep/ .el-dialog__body {
      padding: 10px;
      height: 560px;
      overflow-y: scroll;
    }
   </style> 

注意：这里记博主遇到的一次坑，不管是/deep/还是>>>的使用都是原样输出，即最终生成的style标签依然保留/deep/和>>>在类名当中，导致scoped穿透失败。在我更新项目依赖的时候，这个问题便被解决。
如果你想对scoped理解的更深一些，请参考博主的另一篇博客，写了博主对scoped的理解。