在很多情况下，我们需要修改 element-ui 提供的原生样式，来满足项目的需求
然而 常规的CSS写法可能不会生效
因为当我们在源代码中引用 <el-xxx> 标签时，实际上 浏览器可能会渲染出好几个对应的 class
例如：
引用 <el-radio-button> 时
浏览器会渲染出如下的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打开浏览器开发者工具
image.png
发现 按钮被选中后 作用的样式写在这个类名之下
此时我们就可以使用 /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的原生样式了
