引入elementUI样式

大多数情况下，我们引入elementUI样式有两种形式：

1. 开发环境在main.js里引入：

2.线上版本的时候可能引入CDN地址

总而言之，就是全局引入。所以，想在某个.vue里面覆盖它的样式就不能加 scoped。

但是也想只覆盖这个.vue里的element样式，该如何？

全局写样式覆盖

可能有人想到某些方法：

1. 写一个全局css文件覆盖
2. 在.vue组件里直接使用 <style></style>进行覆盖

这里几个问题就是：

1. 管理起来也是麻烦，万一AB同事使用了同一个CSS类名，那就造成了污染。
2. 开发者还要知道语境，知道“哦，原来那里改过了”。

总之，我个人觉得是挺麻烦的。其实，在官方文档里也介绍了解决scoped的问题。

父组件改变子组件 - 深度选择器（Deep Selectors）

这里先扔官方文档： 官方文档。里面有详细介绍，这里只做如何简单使用。

当你子组件使用了 scoped 但在父组件又想修改子组件的样式，通过 >>> 来实现

1
2
3

<style scoped>
.a >>> .b { /* ... */ }
</style>

将会编译成:

1

a[data-v-f3f3eg9] .b { /* ... */ }

如果你使用了SASS类似的预处理器，通过/deep来实现

在我的项目里（用了SASS预处理器），比方说有一个tabs选项卡我想改变一下样式，如何实践？
直接在要改的组件的父级上加/deep

1
2
3
4
5
6
7
8
9
10
11
12

<style lang="scss" scoped>
  .container /deep/{
    .container__tabs{
      ...
    }
  }
</style>
<template>
  <div class="container">
    <el-tabs class="container__tabs"></el-tabs>
  </div>
</template>

而不是直接对需要改的组件上加，这是错误的：

1
2
3
4
5
6
7
8
9
10

<style lang="scss" scoped>
    .container__tabs /deep/{
      ...
    }
</style>
<template>
  <div class="container">
    <el-tabs class="container__tabs"></el-tabs>
  </div>
</template>