element ui样式穿透

Element UI 是一个基于 Vue.js 的组件库，其样式是通过 CSS 进行定义的。在使用 Element UI 进行开发时，经常会遇到需要自定义样式的情况，这时可以使用样式穿透的方式来实现。

样式穿透是指在子组件中通过一些特殊的 CSS 选择器，来修改父组件中的样式。在 Element UI 中，可以使用 `>>>` 或 `/deep/` 选择器来穿透样式。

举个例子，如果要修改一个按钮的背景色为红色，可以这样写：

/* 父组件中的样式 */
.el-button {
  background-color: green;
}

<!-- 子组件中的模板 -->
<template>
  <el-button class="my-button">Click me</el-button>
</template>

<!-- 子组件中的样式 -->
<style scoped>
.my-button >>> .el-button {
  background-color: red;
}
</style>

上面的代码中，使用了 `>>>` 选择器来穿透 `.el-button` 组件，然后修改了其背景色为红色。注意，样式穿透只能在有作用域的情况下使用，因此需要在样式中加上 `scoped` 属性。

除了 `>>>` 选择器外，还可以使用 `/deep/` 选择器来实现样式穿透，两者的效果是一样的。例如：

<style scoped>
.my-button /deep/ .el-button {
  background-color: red;
}
</style>

需要注意的是，样式穿透虽然可以实现自定义样式的效果，但是也会增加样式的复杂度，可能会影响后续的维护和升级。因此，在实际开发中，应尽量避免使用样式穿透，而是优先考虑使用 Element UI 提供的自定义主题功能。