小程序iView weapp 中i-class 覆盖样式无效解决

mpvue+iview weapp 微信小程序摸坑笔记

微信小程序中，关于第三方组件，不允许直接修改样式，但是可以通过i-class的方式进行添加样式，比如

<template>
    <div>
        <i-row>
            <i-col span="8" i-class="col-class">col-8</i-col>
            <i-col span="8" i-class="col-class">col-8</i-col>
            <i-col span="8" i-class="col-class">col-8</i-col>
        </i-row>
    </div>
</template>
<style lang="css">/*此处不能加scoped*/
   .col-class{
     background-color: red;
   }
</style>

但是这样不能覆盖修改第三方组件已经写好的样式
而且为了不污染其他部分样式，我们一般希望这里添加scoped，此时样式作用域不能深入到子组件中，所以可以通过深度作用选择器（ >>> ）来解决

<template>
    <div>
        <i-grid i-class="my-grid">
            <i-grid-item>1</i-grid-item>
            <i-grid-item>2</i-grid-item>
            <i-grid-item>3</i-grid-item>
        </i-grid>
    </div>
</template>
<style lang="css">
  div >>> .my-grid{
      background-color: red;
      border-top:1rpx solid green;
  }
</style>

ps.
less或者sass等预编译，是不支持>>>操作符的，可以使用/deep/来替换>>>

参考链接：
https://blog.csdn.net/zqian1994/article/details/83899919
https://www.jianshu.com/p/8fd99d8a8eef