elementui侧边导航栏菜单选中之后的背景颜色如何修改
时间: 2025-03-07 14:10:35 浏览: 138
### 修改ElementUI侧边导航栏菜单选中后的背景颜色
为了自定义ElementUI侧边导航栏(`el-menu`)选中项的背景颜色,可以通过覆盖默认样式来实现这一点。具体方法是在项目的全局CSS文件或组件内部的 `<style scoped>` 中添加特定的选择器。
对于 `el-menu-item.is-active` 类,这是用于表示当前激活状态下的菜单项,默认情况下会应用一些预设样式。要改变这个状态下背景的颜色,可以这样做:
```css
/* 全局样式 */
.el-menu-item.is-active {
background-color: #yourColor !important;
}
```
如果希望仅影响某个具体的菜单实例而不是整个应用程序中的所有菜单,则可以在该菜单上设置一个唯一的类名,并基于此进一步限定 CSS 选择范围[^1]。
另外,在某些场景下可能还需要调整其他关联样式的属性以确保视觉一致性,比如文字颜色等。这同样可以通过类似的手段完成定制化配置[^2]。
当涉及到更复杂的主题更改需求时,考虑利用 Element Plus 提供的主题构建工具或是通过 LESS/SASS 变量重载机制来进行深层次的品牌化适配也是一个不错的选择[^3]。
#### 示例代码
下面是一个简单的例子展示如何在一个 Vue 单文件组件里做这样的改动:
```html
<template>
<div class="custom-el-menu">
<!-- 这里的 custom-el-menu 是我们给定的一个额外类 -->
<el-menu :default-active="$route.path" router unique-opened>
<el-submenu index="/example">
<template slot="title">Example</template>
<el-menu-item index="/example/one">One</el-menu-item>
<el-menu-item index="/example/two">Two</el-menu-item>
</el-submenu>
</el-menu>
</div>
</template>
<style lang="scss" scoped>
.custom-el-menu .el-menu-item.is-active {
background-color: #ff7f50 !important; /* 自定义背景色 */
color: white; /* 配合新的背景色调整字体颜色 */
}
</style>
```
阅读全文
相关推荐













