mint-ui修改局部样式的方法

由于VUE的<style scoped>作用域问题,针对mint的组件样式所做的修改,都不生效,但如果不加,那么又会覆盖缺省的全局样式,经过多方查找,终于找到了这篇文章《Vue中的作用域CSS和CSS模块的差异》,其中提到的>>>连接符或/deep/,很好的解决了我的问题.

比如: 

<div class="content">
      <mt-field label="团队名称" v-model="teamName" @blur.native.capture="changeStatus"></mt-field>
      <mt-field label="团队愿景" type="textarea" rows="4" v-model="teamDesc" @blur.native.capture="changeStatus"></mt-field>
</div>

如果这么设置:

<style scoped>
  .content {
    margin-top: 40px;
  }

  .content input {
    border: 1px solid grey;
  }

  .mint-field-core {
    border: 1px solid grey;
  }
</style>

那是没有效果的,但使用>>>或者是/deep/,就有效果了.

<style scoped>
  .content {
    margin-top: 40px;
  }

  .content >>> input {
    border: 1px solid grey;
  }

  .content /deep/ textarea {
    border: 1px solid grey;
  }
</style>