背景:使用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/ 或者 >>> 解决