用深度选择器如何更改element ui组件样式

使用深度选择器可以更精准地修改 element-ui 组件样式，具体步骤如下：

1. 在需要修改样式的组件上，添加 `scoped` 属性，例如：

<template>
  <div class="my-component" scoped>
    <el-button>按钮</el-button>
  </div>
</template>

2. 在组件的 `<style>` 标签中，使用深度选择器 `>>>` 或 `/deep/`，来指定要修改的组件内部的元素，例如：

<template>
  <div class="my-component" scoped>
    <el-button class="my-button">按钮</el-button>
  </div>
</template>

<style scoped>
.my-component >>> .my-button {
  background-color: #f00;
}
</style>

上面的代码中，使用了深度选择器 `>>>` 来选择组件内部的 `.my-button` 元素，并修改了其背景颜色。

需要注意的是，使用深度选择器会增加样式的优先级，需要谨慎使用，避免影响其他组件的样式。