elementUI组件库样式修改整理

一、整体修改样式注意点

• 避免!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30