Element UI中el-form-item label文字颜色自定义方案

HTML
 class="el-form-item">
   class="el-form-item__label">用户名
   class="el-form-item__content">
    
  

其中：

CSS
.el-form-item__label {
  color: #606266;
}

控制了 label 的默认颜色。

因此，如果想修改 label 文字颜色，本质上就是覆盖 .el-form-item__label 的 color 属性。

二、全局修改el-form-item label颜色

如果项目中所有表单的 label 都需要统一修改，可以直接覆盖 Element UI 默认样式。

例如：

CSS
.el-form-item__label {
  color: #409EFF;
}

修改后，所有 el-form-item 的标签都会变成蓝色。

这种方式适合：

• 企业后台统一主题配置；

• 全局视觉规范调整；

• 所有页面使用相同 label 风格。

如果使用 SCSS，可以放在全局样式文件中：

SCSS
.el-form-item__label {
  color: #333;
  font-weight: 500;
}

通常建议放在：

src/assets/styles/index.scss

然后通过入口文件引入：

JavaScript
import '@/assets/styles/index.scss'

三、单个el-form-item自定义label颜色

很多业务场景只需要修改某一个字段的 label，例如：

• 必填字段显示红色；

• 特殊配置项显示橙色；

• 风险操作显示警告颜色。

可以给 el-form-item 添加自定义 class。

示例：

HTML

  label="密码"
  class="password-label">

CSS：

CSS
.password-label .el-form-item__label {
  color: red;
}

最终效果：

密码

会显示为红色。

这种方式不会影响其他表单项，是项目中更推荐的做法。

四、使用label-class-name动态控制颜色

Element UI 的 el-form-item 提供了 label-class-name 属性，可以直接给 label 添加自定义 class。

示例：

HTML

  label="手机号"
  label-class-name="phone-label">

CSS：

CSS
.phone-label {
  color: green;
}

相比给整个 el-form-item 添加 class，这种方式更加精准，因为 class 会直接作用于：

HTML
 class="el-form-item__label phone-label">

不会影响表单内容区域。

推荐场景：

• 单个字段样式控制；

• 动态表单生成；

• 根据配置改变 label 样式。

五、Vue scoped样式无法生效的解决方案

很多 Vue 项目会使用：

HTML
 scoped>

用于隔离组件样式。

但是：

CSS
<style scoped>
.el-form-item__label {
  color:red;
}
style>

通常不会生效。

原因是 Vue 会自动添加属性选择器：

CSS
.el-form-item__label[data-v-xxx] {
}

但是 Element UI 内部生成的 label：

HTML
 class="el-form-item__label">

并没有：

HTML
data-v-xxx

所以无法匹配。

解决方法有三种。

方法一：使用deep穿透

Vue2 项目中可以使用：

CSS
<style scoped>
::v-deep .el-form-item__label {
  color: #409EFF;
}
style>

或者：

CSS
<style scoped>
/deep/ .el-form-item__label {
  color: #409EFF;
}
style>

Vue CLI 项目常见写法：

SCSS
<style scoped lang="scss">
.el-form-item {
  ::v-deep .el-form-item__label {
    color: #409EFF;
  }
}
style>

方法二：取消scoped

如果该组件所有样式都需要覆盖 Element UI，可以直接：

HTML

这种方式简单，但影响范围较大。

方法三：使用label-class-name

对于局部修改，推荐：

HTML

  label="邮箱"
  label-class-name="email-color">

CSS
.email-color {
  color:#67C23A;
}

无需处理 scoped 问题。

六、根据数据动态修改label颜色

后台系统中经常需要根据数据状态动态改变 label 样式。

例如：

HTML

  label="订单状态"
  :label-class-name="statusClass">

JavaScript：

JavaScript
export default {
  data() {
    return {
      statusClass: 'normal-label'
    }
  }
}

CSS：

CSS
.normal-label {
  color:#67C23A;
}

.warning-label {
  color:#E6A23C;
}

.error-label {
  color:#F56C6C;
}

动态切换：

JavaScript
this.statusClass = 'warning-label'

即可实现运行时改变 label 颜色。

七、修改必填标识颜色

Element UI 默认必填星号：

CSS
.el-form-item.is-required:not(.is-no-asterisk)
.el-form-item__label-wrap
.el-form-item__label:before

控制。

如果只修改文字颜色：

CSS
.el-form-item__label {
  color:#333;
}

不会影响星号颜色。

单独修改：

CSS
.el-form-item__label:before {
  color:red;
}

可以调整必填符号颜色。

例如：

CSS
.el-form-item.is-required .el-form-item__label:before {
  color:#F56C6C;
}

八、结合主题变量统一管理颜色

大型后台项目通常不会直接写死颜色，而是通过变量管理。

SCSS 示例：

SCSS
$label-color:#303133;
$important-color:#F56C6C;

.el-form-item__label {
  color:$label-color;
}

.important-label {
  color:$important-color;
}

优势：

• 方便主题切换；

• 避免大量重复代码；

• 提升项目维护性。

九、常见问题排查

1. 修改CSS没有效果

检查是否被 Element UI 默认样式覆盖。

可以打开浏览器开发者工具：

F12 → Elements → 查看 .el-form-item__label

确认最终生效规则。

如果发现：

CSS
.el-form-item__label {
 color:#606266;
}

优先级更高，可以提高选择器权重：

CSS
.el-form .el-form-item__label {
 color:red;
}

2. scoped模式下样式失效

原因通常是：

HTML
 scoped>

导致无法匹配第三方组件内部 DOM。

解决：

CSS
::v-deep .el-form-item__label {
 color:red;
}

3. 修改后所有页面受到影响

说明使用了全局覆盖：

CSS
.el-form-item__label {
}

建议改为：

CSS
.custom-form .el-form-item__label {
}

限制作用范围。

十、Element UI label颜色修改最佳实践

根据不同需求选择方案：

实际开发中，优先推荐 label-class-name，因为它不会污染全局样式，也不会受到 Vue scoped 的限制。

总结

Element UI 中修改 el-form-item label 文字颜色，本质是覆盖 .el-form-item__label 样式。根据项目需求，可以选择全局 CSS 覆盖、添加自定义 class、使用 label-class-name 或通过 ::v-deep 穿透 scoped 样式。

对于普通业务项目，单字段修改推荐使用 label-class-name，大型后台系统则建议结合主题变量统一管理颜色。合理控制样式作用范围，不仅可以快速实现 UI 定制，也能避免后期维护中的样式冲突问题。