解决iview和elementUI组件样式覆盖无效的方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zqian1994/article/details/83899919

iview和elementUI是我们在用vue开发项目时比较常用到的ui组件，在我们使用第三方UI组件库开发时有时需要对这些组件进行一些样式修改。
为了vue页面样式模块化，不对全局样式造成污染，我们往往都会加入scoped属性用来限制样式的作用域，然而这也会导致当我们修改部分ui组件样式失效。为了避免这种情况，我们常用以下方式来解决。

一、新建一个不含scoped的style标签覆盖组件样式

不推荐使用，因为如果命名冲突会导致其他样式覆盖异常

<style scoped>
	/*页面样式*/
</style>
// ui组件覆盖
<style>
  .home .ivu-card-body {
    height: 345px;
  }
</style>

一、深度作用选择器（ >>> ）

<style scoped>
.box >>> .content {
  font-size:20px;
}
</style>

二、/deep/ 预处理器less下使用

深度选择器/deep/与>>>作用相同

<style scoped lang="less">
.select {
     /deep/ .ivu-card-body {
        width: 100%;
      }
    }
</style>

然而最近谷歌浏览器对于/deep/貌似不太友好，控制台提示/deep/将要被移除。

[Deprecation] /deep/ combinator is no longer supported in CSS dynamic profile.It is now effectively no-op, acting as if it were a descendant combinator. /deep/ combinator will be removed, and will be invalid at M65. You should remove it. See https://www.chromestatus.com/features/4964279606312960 for more details.

所以我们也可以在less下另类调用>>>，如下：

// 采用的less的转义和变量插值
<style scoped lang="less">
@deep: ~'>>>';
.select {
     @{deep} .ivu-card-body {
        width: 100%;
      }
    }
</style>

综上。
参考：Vue高版本中一些新特性的使用详解