前言：

可能很多人做项目的时候，看过很多代码见过几种不同的修改UI库样式的方法，但却没有去思考到底有那几种主流的方法可以修改UI库，也没有思考他们有什么区别，今天写这文章就总结一下。

先开门见山说说几种方式：

（1） ::v-deep

（2） :deep()

（3） /deep/

（4） >>>

（5） 全局样式覆盖

（6） 自定义组件库的样式主题

一、::v-deep

简单说明： ::v-deep是Vue3官方推荐使用的方式：从Vue2.6开始引入，特别是在Vue3中,用于在含有 scoped 属性的样式块中。 优点： 更符合W3C标准，且在未来的CSS规范中可能得到正式支持。

用法示例：

<style scoped>
::v-deep .el-table {
  /* 想要的样式 */
  color: red;
  font-weight: bold;
}
</style>

二、:deep()

简单介绍： :deep() 是Vue3中引入的深度选择器的别名，它其实等同于::v-deep，需要用于在带有 scoped 组件的作用域。

用法示例：

<style scoped>
:deep(.el-table) {
  /* 自定义样式 */
  color: red;
  font-weight: bold;
}
</style>

三、/deep/

简单介绍： 在Vue2及之前的版本中，/deep/是常用的深度选择器，是比较旧的用法，但它不是CSS规范的一部分,所以随着浏览器和构建工具的更新，未来可能存在兼容性风险，对比上面两种方式并不太推荐使用。

用法示例：

<style scoped>
/deep/ .el-table {
  /* 自定义样式 */
  color: red;
  font-weight: bold;
}
</style>

四、>>>

简单介绍： 在 Sass 和 Less 等预处理器中，>>> 也被用来表示样式穿透。在 Vue 中，尤其是在老版本中，>>> 被 Vue Loader 识别并转换为 /deep/ 来实现样式穿透。因此也是不推荐使用的。

用法示例：

<style scoped>
>>> .el-table {
  /* 自定义样式 */
  color: red;
  font-weight: bold;
}
</style>

五、全局样式覆盖

简单介绍： 顾名思义就是直接强行修改覆盖UI库的样式，这方式会影响全局，一般非特殊情况也不建议使用。

/* 全局样式文件，如global.css或App.vue的<style>标签内 */
.el-button {
  background-color: #4CAF50; 
  border-color: #4CAF50; 
  color: white; 
}

六、自定义组件库的样式主题

简单描述： 其实就是对UI库存的样式不满意，批量进行风格调整符合自己的项目，再引入覆盖。特意提到这个是因为这种方式一般用于黑白主题之类的需求环境中会用到。

// 在项目的入口文件中 
import 'element-ui/lib/theme-chalk/index.css'; 
// 自定义变量文件
import './element-test.scss'; 

小结：

虽然这几种方式都能达到目的，但总结下来无论是从兼容性还是规范性都是最推荐::v-deep和:deep()两种写法。