Vue中Element-UI组件默认CSS样式修改的方式是什么

Element-UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，提供了丰富的组件和功能，帮助开发者快速构建高质量的应用程序。然而，在实际开发中，我们经常需要根据项目的需求对 Element-UI 组件的默认样式进行修改。本文将详细介绍在 Vue 项目中如何修改 Element-UI 组件的默认 CSS 样式，涵盖多种方法和技巧。

1. 使用全局样式覆盖

1.1 直接在 main.js 中引入自定义样式

在 Vue 项目中，我们通常会在 main.js 中引入 Element-UI 的样式文件。为了覆盖默认样式，可以在引入 Element-UI 样式文件之后，再引入自定义的样式文件。

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/custom.css'; // 引入自定义样式文件

Vue.use(ElementUI);

在 custom.css 文件中，可以直接编写覆盖 Element-UI 默认样式的 CSS 代码。

/* custom.css */
.el-button {
  background-color: #ff0000;
  color: #ffffff;
}

1.2 使用 scoped 样式

在 Vue 单文件组件中，可以使用 scoped 属性来限制样式的作用范围。这样，样式只会应用于当前组件，而不会影响其他组件。

<template>
  <el-button>自定义按钮</el-button>
</template>

<style scoped>
.el-button {
  background-color: #ff0000;
  color: #ffffff;
}
</style>

需要注意的是，scoped 样式只会影响当前组件的 DOM 元素，而不会影响子组件的样式。如果需要修改子组件的样式，可以使用深度选择器 >>> 或 /deep/。

<style scoped>
.parent >>> .el-button {
  background-color: #ff0000;
  color: #ffffff;
}
</style>

2. 使用 :deep 选择器

在 Vue 3 中，>>> 和 /deep/ 选择器已被弃用，取而代之的是 :deep 选择器。`