当前位置：首页 > news >正文

elementUI组件库样式修改整理

news 2025/8/24 11:45:23

一、整体修改样式注意点

避免!important，能使用深度选择器就用深度选择器
主题色使用变量，方便后期统一修改，最好新建一个单独的文件，专门用于定义公共变量
样式文件尽量放在一个文件里，方便后期维护

二、单独element Form样式修改，不影响其他

修改点（其他框架样式也类似修改）

使用div包裹form项
使用深度选择器 /deep/ 或者::v-deep 穿透修改样式

代码

<el-form :inline="true" :model="formInline" class="demo-form-inline"><div class="self-style"><el-form-item label="审批人"><el-input v-model="formInline.user" placeholder="审批人"></el-input></el-form-item></div><el-form-item label="活动区域"><el-select v-model="formInline.region" placeholder="活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item>
</el-form><style>
.self-style{background-color: #F5F5F5;/deep/ .el-input__inner {border: none}/deep/ .el-form-item {margin-bottom: 22px;border: 1px solid #DCDCDC;border-radius: 4px;}
} 
</style>