在vue中使用深度選擇器修改element-ui的原生樣式

在很多情況下，我們需要修改 element-ui 提供的原生樣式，來滿足項目的需求
然而 常規的CSS寫法可能不會生效
因為當我們在源代碼中引用 標簽時，實際上 瀏覽器可能會渲染出好幾個對應的 class
例如：
引用 時
瀏覽器會渲染出如下的DOM結構：

<label data-v-7cc60609="" role="radio" tabindex="-1" class="el-radio-button">
  <input type="radio" name="顏色" tabindex="-1" class="el-radio-button__orig-radio" value="1">
  <span class="el-radio-button__inner">白色</span>
</label>

在修改樣式之前，我們必須先弄清楚元素之間的層級關系

下面介紹2種修改 element-ui 原生樣式的方法

方法一：

在原有的 style scoped 標簽外部，新建一個不帶scoped的style標簽

/// 修改單選按鈕的樣式
.el-radio-button__inner {
    height: .6rem;
    padding: .16rem .2rem;
    margin-right: .25rem;
    border: 1px solid #FFFFFF;
    border-radius: .4rem;
    background: #F0F0F0;
}

但是這種方法會導致 el-radio-button__inner的樣式 滲透到子組件中
很有可能會影響后續的開發和維護

方法二：使用深度選擇器

例如：我們想修改按鈕被點擊之后的樣式
選中某個按鈕后，F12打開瀏覽器開發者工具

發現 按鈕被選中后 作用的樣式寫在這個類名之下
此時我們就可以使用 /deep/ 前綴 通過深度選擇器 來“穿透”這個樣式

<style scoped lang="less">
/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: #FF3333;
    border-color: #FF3333;
    box-shadow: none;
}

這樣，我們就能夠在不污染其他組件的情況下，按照自己的需求 修改element-ui的原生樣式了