一、整体修改样式注意点
- 避免
!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>