面试题：如何修改 Element UI 组件的默认样式？

在 Vue 项目中使用 Element UI 时，有时需要修改其组件的默认样式。以下是几种常见的方法：

1. 使用 `scoped` 样式

在 Vue 单文件组件中，可以使用 <style scoped> 来定义局部样式。这种方式可以避免样式污染全局。

示例

<template>
  <el-button class="custom-button">Custom Button</el-button>
</template>

<style scoped>
.custom-button {
  background-color: red;
  color: white;
}
</style>

注意事项

scoped 样式仅对当前组件生效。
由于 Element UI 组件的样式是通过类名定义的，可能需要使用深度选择器 ::v-deep（Vue 2 使用 /deep/ 或 >>>）。

2. 使用深度选择器

如果需要修改子组件的样式，可以使用深度选择器。

示例

<template>
  <el-button class="custom-button">Custom Button</el-button>
</template>

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

说明

::v-deep 是 Vue 3 中的深度选择器语法。
在 Vue 2 中，可以使用 /deep/ 或 >>>。

3. 全局覆盖样式

如果需要全局修改 Element UI 组件的样式，可以在全局样式文件中定义。

示例

在 src/assets/styles/element-variables.scss 中定义：

// 修改按钮的默认样式
.el-button {
  background-color: red;
  color: white;
}

然后在 main.js 中引入：

import './assets/styles/element-variables.scss';

注意事项

全局样式会影响所有使用该组件的页面，需谨慎使用。

4. 使用 `class` 或 `style` 属性

可以直接在组件上使用 class 或 style 属性来覆盖默认样式。

示例

<template>
  <el-button class="custom-button" style="background-color: red; color: white;">
    Custom Button
  </el-button>
</template>

<style>
.custom-button {
  font-size: 16px;
}
</style>

说明

这种方式适合简单的样式覆盖。
如果需要覆盖多个样式，建议使用 CSS 类名。

5. 自定义主题

如果需要全局修改 Element UI 的主题样式，可以使用官方提供的 主题生成工具。

步骤

安装主题生成工具：

npm install element-theme -g

初始化主题配置文件：

et --init

修改 element-variables.scss 文件中的变量：

$--color-primary: red; // 修改主题色

编译主题：

et

在项目中引入生成的主题文件：

import '../theme/index.css';

优点

可以全局修改 Element UI 的主题样式。
适合需要定制化主题的项目。

6. 使用 CSS 预处理器

如果项目使用了 CSS 预处理器（如 Sass、Less），可以通过变量和混合（mixin）来修改样式。

示例（Sass）

// 定义变量
$primary-color: red;

// 修改按钮样式
.el-button {
  background-color: $primary-color;
  color: white;
}

说明

使用预处理器可以更方便地管理和复用样式。

7. 使用 `!important`

如果样式优先级不够，可以使用 !important 强制覆盖。

示例

<template>
  <el-button class="custom-button">Custom Button</el-button>
</template>

<style>
.custom-button {
  background-color: red !important;
  color: white !important;
}
</style>