elementUI组件库样式修改整理

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

1. 全局样式覆盖：在项目的全局样式文件中（如main.css或App.vue），使用更具体的选择器来覆盖默认样式。

/* 覆盖Element UI的按钮颜色 */
.el-button {
  background-color: #409EFF !important;
}

2. 使用scoped样式：在单文件组件（.vue文件）中，你可以使用scoped属性来限定样式只作用于当前组件。

<style scoped>
/* 仅作用于当前组件的Element UI输入框 */
.el-input__inner {
  border-color: red;
}
</style>

3. 内联样式：直接在元素上使用style属性来应用样式。

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

4. 使用深度选择器：在scoped样式中使用>>>、/deep/或::v-deep来穿透组件边界。

<style scoped>
/* Vue 2.x 使用 /deep/ 或者 >>> */
.deep-button /deep/ .el-button {
  color: red;
}
 
/* Vue 3.x 使用 ::v-deep */
.deep-button ::v-deep .el-button {
  color: red;
}
</style>

5. 组件内部样式：如果需要在组件内部修改子组件的样式，可以在组件内部定义一个局部样式。

<template>
  <div class="my-component">
    <el-button class="my-button">按钮</el-button>
  </div>
</template>
 
<style>
.my-button {
  background-color: #409EFF;
}
</style>

注意：使用!important可以覆盖除了!important声明的规则以外的所有规则。然而，滥用!important可能会导致样式维护困难，所以应该尽可能避免使用它，除非确实需要覆盖其他同选择器的样式。