在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的原生样式了