在RuoYi-Vue框架中自定义字典标签CSS样式的方法。使用自定义样式时需要同时指定基础样式el-tag和自定义样式类名，扩展字典标签的视觉样式方案。
目录
运行环境：
- 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样式：
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;
}重新编译前端项目
bash
cd .\ruoyi-ui\
npm run dev 2.4、指定自定义样式属性
当 添加/修改 数据字典数据 时，指定以下两个属性：
样式属性：el-tag el-tag--pink
回显样式：默认(default)
参考以上这几步骤配置完成后，就能呈现自定义CSS样式网格。快试试吧。