修改ElementUI组件默认样式

在ElementUI中，修改组件的默认样式可以通过以下几种方式：

1. 使用CSS覆盖样式：

   你可以在全局样式文件中对ElementUI组件的类名使用更高优先级的CSS规则来覆盖默认样式。

/* 确保使用了更高的选择器优先级 */
.el-button {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

2. 使用深度选择器：

   如果你只想修改组件的某一部分，可以使用Scoped CSS并结合深度选择器>>>或/deep/（根据你使用的预处理器而定）。

/* Vue单文件组件内的Scoped CSS */
<style scoped>
.el-button >>> .el-button__text {
  color: red;
}
</style>

3. 使用内联样式：

   在某些情况下，你可能需要直接在组件上应用内联样式。

<el-button style="background-color: #f56c6c;">按钮</el-button>

4. 使用全局配置：

   对于某些组件，ElementUI提供了全局配置的API来修改默认样式。

import { Button } from 'element-ui';
 
// 修改默认属性
Button.props.type.default = 'primary';

5. 使用主题换肤：

   ElementUI支持通过SCSS变量来定制主题颜色，你可以通过这种方式来修改默认样式。

@import "~element-ui/packages/theme-chalk/src/index";
 
$--color-primary: #f56c6c;
 
@include element-ui.export-colors();

注意：在实际项目中，请确保你的CSS选择器优先级足够高，以保证你的自定义样式能覆盖默认样式。如果使用了Vue单文件组件，记得要使用scoped属性，以避免样式污染。