vue项目引用 iView 组件——自定义组件样式不生效

开发过程中，项目引用了iView组件。但是有些样式不是我们想要的，这时候就需要自己写样式了。
<style scoped>这个写法大家一定都不陌生。。。。当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这主要就解决了样式不会污染到全局以及其他组件里的样式。但是如果我们项目中用到了类似iView/Mint-ui等这些框架时，发现这么写无法修改我们想修改的组件样式。

一、scoped属性干了哪些事

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

下面是解析之后的：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

我们可以看到scoped干了两件事：
①、给标签添加了一个唯一标识编码
②、给对应的样式也添加了这个编码属性

所以这种样式的覆盖主要就通过权重来修改覆盖。tips：

.button[data-v-2311c06a]{ padding: 5px 10px; font-size: 12px; border-radus: 2px;}

.content{ width: 1200px; margin: 0 auto;}

.content .button{ border-raduis: 5px;} //.content .button比.button[data-v-2311c06a]权重高

二、接下来就说说全局样式与局部样式的使用

①、在一个组件中同时使用有作用域和无作用域的样式

<style>
/* 全局样式 */
</style>

<style scoped>
/* 单个组件样式 */
</style>

②、不用scoped限定css的作用域，而是通过给template的根部div添加一个唯一的名字，用父级限制样式

<style>
.example .icon{
  color: red;
}
</style>

<template>
  <div class="example">
    <span class="icon"></span>
  </div>
</template>

③、深度作用选择器 ：如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符

       这个就可以解决，我们调用别人封装好的组件的时候，不想去掉scoped属性，又想让我们自己写的样式生效这个问题。
iview改变tab标签页的默认样式，如下：

<style scoped>
    /* 不起作用 ，但是去掉scoped是可以生效的 */
    .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
        border-radius: 0;
        background: #ccc;
    }
    /* 还是不起作用 */
    .demo-tabs-style2 .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
        border-radius: 0;
        background: #ff0000;
    }
    /* 终于生效了 */
    .demo-tabs-style2>>>.ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
        border-radius: 0;
        background: #eeee00;
    }
</style>

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。

<template>
  <div id="app">
    <Input v-model="text" class="text-box"/>
  </div>
</template>

<style lang="less" scoped>
.text-box {
  /deep/ input {
    width: 166px;
    text-align: center;
  }
}
</style>