如何修改element plus的组件样式？

Element Plus是一个基于Vue.js的UI组件库，如果你想修改其内置组件的样式，可以按照以下步骤操作：

1. **全局样式**：
- 将自定义的样式添加到项目的全局样式表（例如`main.css`或`.vue`文件中的`<style lang="scss">`部分），这样可以直接覆盖Element Plus的默认样式。使用`:deep()`伪类（在Sass里是`~`）可以让样式穿透组件树。

   :deep(.el-input) {
     /* 自定义样式 */
     height: 30px;
   }

2. **局部修改**：
- 如果你想针对特定组件做调整，可以在对应的组件模板内使用 scoped 模式（`.vue`文件中`<style scoped>`），这样样式只影响当前组件内的元素。

   <template>
     <el-input class="custom-input">
       <!-- 其他内容 -->
     </el-input>
   </template>

   <style scoped>
     .custom-input {
       /* 自定义样式 */
       height: 30px;
     }
   </style>

3. **主题变量**：
- Element Plus提供了主题颜色和字体大小等变量供开发者自定义。你可以通过修改配置文件(`src/theme-chalk/index.js`或类似路径)，然后重启应用来应用新的主题。

4. **引入并覆盖主题插件**：
- 如果你想要对整个库的样式进行深度定制，可以引入Element Plus的主题插件，并在其基础上创建一个新的CSS文件，然后导入这个新文件。

5. **利用CSS预处理器**：
- 使用像Sass、Less等预处理器，可以使样式的编写和维护更方便。

记得在修改样式后，可能需要在浏览器的开发者工具中清除样式缓存，或者在生产环境部署时使用CSS哈希（如Webpack的`MiniCssExtractPlugin`）以确保浏览器每次都能获取最新的样式。