修改 ElementUI 的样式
在使用 ElementUI 开发项目时，我们可能会遇到需要修改其默认样式的情况。为了实现这一点，以下是几种解决方案。
一、通过覆盖默认样式
最直接的方法是通过编写自定义的 CSS 样式来覆盖 ElementUI 的默认样式。这可以通过在项目的全局样式文件中添加特定的选择器并设置所需的样式属性来完成。例如，如果想要修改按钮的颜色，可以在全局样式文件（如 index.css 或 app.css）中添加以下代码：
css
/* 修改按钮颜色 */
.el-button {
background-color: #ff6f61;
border-color: #ff6f61;
}
/* 修改按钮文字颜色 */
.el-button:hover {
color: #ffffff;
}
请注意，在实际开发中，可能需要使用更具体的选择器或提高样式的优先级以确保自定义样式能够正确生效。还可以利用浏览器开发者工具查看元素的实际样式，并根据需要调整选择器和样式属性。
二、使用主题功能
ElementUI 提供了主题定制的功能，允许用户创建自己的主题变量并基于这些变量生成新的样式文件。需要安装 element-theme 和 babel-plugin-component 插件。然后，按照官方文档配置好相关环境后，就可以开始自定义主题了。
例如，要改变主色调为蓝色，可以在 .elementui.d.ts 中定义如下内容：
typescript
import 'element-theme-chalk/src/index.scss';</p>
<p>$--color-primary: #409eff; // 设置主色为蓝色
接着运行命令 et -w 来编译生成带有新样式的 theme 文件夹，最后将其引入到项目中即可。这种方式不仅方便快捷，而且可以保证整个项目的样式一致性。
三、深度选择器 / scoped 样式
当我们使用单文件组件（SFC）时，有时候希望仅对当前组件内的 Element 组件进行样式修改，而不影响其他地方。此时可以借助 <style scoped> 标签以及 /deep/ 深度选择器来实现局部样式覆盖。比如在某个 Vue 组件中修改表格行高：
vue
<!-- 表格内容 -->
</p>
/deep/ .el-table__row {
height: 60px;
}
<p>需要注意的是，不同的打包工具（如 Webpack 版本）可能会影响 /deep/ 的写法，某些情况下可能需要使用 >>> 或者 ::v-deep 替代。
以上三种方式都可以很好地解决修改 ElementUI 样式的问题，开发者可以根据具体的业务需求和个人喜好选择合适的方法。
