RuoYi-Vue字典标签CSS样式自定义指南

在RuoYi-Vue框架中自定义字典标签CSS样式的方法。使用自定义样式时需要同时指定基础样式el-tag和自定义样式类名，扩展字典标签的视觉样式方案。

目录

1、字典标签

2、添加自定义CSS样式

2.1、查看字典标签的CSS样式

2.2、查找CSS样式文件

2.3、添加自定义CSS样式

2.4、指定自定义样式属性

3、实践总结

---

运行环境：

• Windows-10-BusinessEditions-22h2-x64
• RuoYi-Vue(SpringBoot3)

1、字典标签

自定义CSS样式预览

2、添加自定义CSS样式

2.1、查看字典标签的CSS样式

在开发者工具中，查看 字典标签 的样式，可以看到其是在 el-tag 基础样式上扩展。

2.2、查找CSS样式文件

查找 RuoYi-Vue 项目中以 el-tag-- 开头的样式，其所在配色方案文件《/ruoyi-ui/public/styles/theme-chalk/index.css 》中，自定义样式只需要重新指定 background-color 、border-color 、color 的属性值即可。

2.3、添加自定义CSS样式

找到项目根目录下的文件《/ruoyi-ui/src/assets/styles/ruoyi.scss》，在文件尾部添加自定义CSS样式。

自定义CSS样式：

/* 标签tag样式：粉色 */
.el-tag--pink {
  background-color: #ffe5f7;
  border-color: #f3b5de;
  color: #ea6dc1;
}

/* 标签tag样式：浅紫色风格 */
.el-tag--lightpurple {
  background-color: #f2d7ee;
  border-color: #d4a3d4;
  color: #7a2e8c;
}

/* 标签tag样式：浅紫色风格 */
.el-tag--lightorange {
  background-color: #ffd6a5;
  border-color: #e6b374;
  color: #8c4e04;
}

重新编译前端项目

cd .\ruoyi-ui\
npm run dev  

2.4、指定自定义样式属性

当 添加/修改 数据字典数据 时，指定以下两个属性：

样式属性：el-tag el-tag--pink

回显样式：默认(default)

参考以上这几步骤配置完成后，就能呈现自定义CSS样式网格。快试试吧。