在前端开发中，Element UI 是一个非常流行的 Vue.js 基础组件库，它提供了丰富的 UI 元素和样式，帮助开发者快速构建美观的界面。然而，在实际项目中，我们可能会遇到需要对 Element UI 的默认样式进行修改的情况，以便更好地符合项目的定制需求。本文将详细介绍如何修改 Element UI 的默认样式。
我们需要理解 CSS 的优先级规则。在 CSS 中，内联样式（style属性）的优先级最高，然后是 ID 选择器、类选择器、元素选择器等。Element UI 的样式通常具有较高的权重，因此直接覆盖可能比较困难。为了改变默认样式，我们可以采取以下策略：
1. **增加选择器的特异性**：通过在选择器前添加更多的元素或类，可以提高 CSS 规则的特异性，从而提高其优先级。例如，如果要修改 `.el-button` 的颜色，可以使用 `.my-class .el-button` 来增加特异性。
2. **使用 `!important`**：在样式声明末尾添加 `!important` 可以强制应用该样式，但应谨慎使用，因为过度使用可能导致样式难以维护。
3. **自定义样式文件**：在项目中创建一个专门用于覆盖 Element UI 样式的 CSS 文件，确保这个文件在 Element UI 的 CSS 文件之后引入，这样我们的样式会覆盖 Element UI 的默认样式。
在 Element UI 中，针对特定组件的自定义样式，通常有两种主要方式：
### 1. 使用 `customClass` 属性
如问题描述中提到的，`customClass` 是 Element UI 提供的一个属性，允许我们为组件添加自定义的 CSS 类。例如，对于消息提示组件 `ElMessageBox`，可以在创建实例时设置 `customClass`：
```javascript
this.$msgbox({
title: '提示',
message: '这是一条消息',
customClass: 'my-custom-class',
showCancelButton: true
});
```
然后在 CSS 文件中定义 `my-custom-class`：
```css
.my-custom-class .el-message-box__wrapper {
/* 自定义样式 */
}
```
### 2. 直接使用深度选择器（>>> 或 /deep/）
Vue CLI 创建的项目通常使用了 Webpack 和 CSS 模块化处理，这可能导致 Element UI 的样式无法直接覆盖。在这种情况下，可以使用深度选择器（`>>>` 或 `/deep/`）来穿透组件的嵌套作用域，直接修改内部元素的样式。例如：
```css
.el-message-box >>> .el-message-box__wrapper {
/* 自定义样式 */
}
```
请注意，`/deep/` 选择器在 CSS Modules 中已弃用，而 `>>>` 在某些浏览器中可能不受支持，因此建议结合使用 `customClass` 或者考虑使用其他 CSS 预处理器（如 SCSS 或 Less），它们提供了更优雅的方式来解决样式穿透问题。
总结来说，修改 Element UI 的默认样式主要依赖于增加 CSS 选择器的特异性、使用 `!important`、自定义 CSS 文件以及利用 `customClass` 属性或深度选择器。在实际应用中，应根据项目需求和团队规范灵活选择合适的方法。同时，保持良好的代码组织和注释，以方便后期的维护和扩展。
