【Element-ui】面包屑字体颜色修改

最新推荐文章于 2024-05-23 19:16:52 发布

学编程的北极熊

最新推荐文章于 2024-05-23 19:16:52 发布

阅读量4k

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/baidu_20313315/article/details/126462293

版权

1. 常见问题

我们在使用element-ui的面包屑功能的时候，会发现他们没有修改字体颜色的属性或者方法，如果我们的每一项是通过“遍历"的形式显示的化，一条一条添加样式不太明智。

2. 要达到的效果

点击导航，联动面包屑，点击多次导航，只有当前导航"高亮"，其他导航变暗”
在这里插入图片描述

3. 样式修改

/* 不被选中时的颜色 */
.el-breadcrumb ::v-deep .el-breadcrumb__inner {
        color: #d9bb95 !important;
        font-weight:400 !important;
}
/* 被选中时的颜色 */
.el-breadcrumb__item:last-child ::v-deep .el-breadcrumb__inner {
        color: #fc9105 !important;
        font-weight:800 !important;
}