修改elemet-ui組件的內部樣式

實例：修改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的理解。