飞羽映月

背景：使用ElementUI组件时，发现更改样式失效，以下为el-input分析

Vue用/deep/深度作用域修改ElementUI默认样式

产生失效原因为 scoped 作用域问题

• 删除 scoped，直接覆盖修改原始样式 （对其他页面造成影响）
• 同上删除 scoped ，但是前面添加自己手写的类( 重写覆盖优化 )
• 使用/deep/或者>>> 深度更改作用域

第三种方法举例

html代码

<el-input
  class="noborder-input"
>
</el-input>

style代码

.noborder-input /deep/ .el-input__inner {
  border: 0;
  border-bottom: 1px solid #ccc;
  border-radius: 0px;
}

---

总结：

• 父组件的 scoped 样式不能穿透到子组件上。
• 但是用去掉 scoped 的方法解决，会污染全局样式，不可取。
• 最佳方式：使用 /deep/ 或者 >>> 解决