如何修改element ui的样式

1. 新建全局样式表：在 src/assets/style 文件夹下新建 global.css 文件，在 main.js 中通过 import './assets/style/global.css' 引入。在该文件中编写的样式会覆盖 Element UI 的默认样式，适合对 Element UI 进行整体风格的修改，如整体配色等。
2. 在当前 Vue 单页面中添加新的 style 标签：在当前 Vue 单页面的原有 style 标签后，添加一对新的 style 标签，且新标签中不要添加 scoped 属性。不过这种方式可能会因修改全局样式而在不同组件中产生冲突。
3. 使用深度选择器修改标签样式：在有 scoped 属性的 style 标签中，找到要修改的 Element UI 标签类名，在其前加上 /deep/（在某些情况下也可使用 >>> 或 ::v - deep）来强制修改默认样式。例如，/deep/.el - cascader {width: 100%;} 可修改级联选择框的默认宽度。如果使用 >>> 在 CSS 预处理器中，需用变量代替，如在 Less 中可写为 @deep: ~'>>>';.box {@{deep}.title{...}}。
4. 通过内联样式或绑定类样式覆盖默认样式：可以在某些标签中使用内联样式 style 或绑定类样式的方式直接覆盖默认样式，但这种方法局限性较大，不是很通用。例如，通过内联样式 <el - button :style="selfstyle">默认按钮</el - button>，在 script 中定义 selfstyle；或者通过绑定类样式 <el - button :class="selfbutton">默认按钮</el - button>，并在 style 标签中定义 .self - button 的样式。

        此外，如果想要动态修改 Element UI 的主题颜色，可以通过修改 SCSS 变量来实现，但这需要在代码运行前进行配置4。如果项目使用了 CDN 引入 Element UI 的 CSS 文件，也可以通过重新请求不同主题的 CSS 文件并替换来实现动态换肤。

       在 Vue 项目里若要深度修改 Element UI 样式，可运用深度选择器达成此目的。不同的 CSS 预处理器使用的深度选择器语法有差别。以下为你提供使用不同预处理器进行深度修改的示例代码。

<template>
  <div>
    <el-button type="primary">默认按钮</el-button>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped lang="scss">
/* 使用 /deep/ 选择器（适用于 Vue CLI 3 及以下） */
/deep/ .el-button--primary {
  background-color: #ff6600;
  border-color: #ff6600;
}

/* 使用 ::v-deep 选择器（Vue 3 推荐） */
::v-deep .el-button--primary:hover {
  background-color: #e65c00;
  border-color: #e65c00;
}
</style>

注意事项

• 如果你使用的是 CSS 而非预处理器，可使用 >>> 作为深度选择器。不过某些 CSS 预处理器可能不支持 >>>，所以推荐使用 /deep/ 或者 ::v-deep。
• 深度选择器仅在 <style scoped> 存在时起作用。
• 对于 Vue 3，推荐使用 ::v-deep 选择器。