Element导航菜单自定义样式

最新推荐文章于 2025-06-11 09:51:55 发布

原创最新推荐文章于 2025-06-11 09:51:55 发布 · 3.3w 阅读

58 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用Element UI框架自定义菜单的样式，包括主菜单和子菜单的背景色、字体颜色，以及鼠标悬浮时的样式修改。通过修改CSS样式，可以实现菜单的个性化设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.修改主菜单的背景色等，直接在<el-menu>标签上写所需背景色，比如：

 <el-aside width="205px" >
       <el-menu v-on:select="handleSelect" :default-active="$route.path" router
                background-color="rgba(70, 76, 91, 1)" text-color="#ccc">
                <el-submenu index="1">
                        <el-menu-item index="/account">管理1</el-menu-item>
                        <el-menu-item index="/bhConfigure">配置1</el-menu-item>                        
                </el-submenu>
       </el-menu>
</el-aside>

2.修改子菜单的背景色：

.el-menu-item {
    background-color: #333  !important;
}

字体颜色：

.el-aside {
    color: #333;
}

3.鼠标悬浮时，子菜单的样式：

.el-menu-item:hover{
    outline: 0 !important;
    color: #409EFF !important;
}
.el-menu-item.is-active {
    color: #fff !important;
    background: #409EFF !important;
}

4.鼠标悬浮时，主菜单的样式：

.el-submenu__title:focus, .el-submenu__title:hover{
    outline: 0 !important;
    color: #409EFF !important;
    background: none !important;
}

ps：

需要修改第三方组件的CSS，这些都是 scoped 样式，移除 scope 或打开一个新的样式是不可能的。

使用深层选择器 >>> /deep/ ::v-deep 可以帮助你。

例如:

>>> .el-menu-item:hover{
    outline: 0 !important;
    color: #409EFF !important;
}

/deep/ .el-menu-item:hover{
    outline: 0 !important;
    color: #409EFF !important;
}

::v-deep .el-menu-item:hover{
    outline: 0 !important;
    color: #409EFF !important;
}