【ElementPlus】修改Element Plus中部分组件的原有样式，包含：el-input、el-select、el-dialog、el-drawer等组件样式

Mr.小朱同学

于 2024-12-14 19:18:30 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：【Web前端笔记】文章标签： vue.js 修改ele原有样式修改ElementPlus样式修改el-drawer头部样式修改el-input圆角样式

43 篇文章 ¥29.90 ¥99.00

订阅专栏

1.1、修改圆角边框

el-input、el-select、el-dialog等组件中，边框的样式都是带有圆角的，对我来说，我不太喜欢圆角的样式，更喜欢正常的边框，正方形看起来更舒服，所以就需要修改组件的原有样式，可以使用下面代码修改原有样式。

<style scoped>
:deep(.el-input__wrapper), :deep(.el-textarea__inner), :deep(.el-select__wrapper) {
  border-radius: 0;
}
</style>

el-dialog组件可以使用style属性直接修改圆角边框样式，代码如下所示：

<el-dialog style="border-radius:0;">
</el-dialog>

对于el-drawer组件来说，默认的header头部样式中，会有一个margin-bottom="32px"的属性，这样会导致header和body之间有很大的空白区域，看起来不是很舒服，可以使用下面代码修改header头部的原有样式，如下所示：

<templat

了解本专栏