el-menu改变颜色
时间: 2023-11-07 11:05:27 浏览: 139
要改变el-menu的颜色,你可以根据需要设置背景色、文字颜色和激活菜单的文字颜色。在el-menu标签中,可以使用background-color、text-color和active-text-color属性来分别设置菜单的背景色、文字颜色和激活菜单的文字颜色。例如,你可以这样设置:
```html
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="red">
</el-menu>
```
此外,你还可以使用CSS样式来修改菜单的颜色。例如,你可以通过设置.el-menu .el-menu-item:hover和.el-menu .el-menu-item.is-active的样式属性来修改菜单项在鼠标悬停和选中状态下的背景色。具体的样式属性可以根据你的需求进行调整。例如:
```css
.el-menu .el-menu-item:hover {
background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important;
}
.el-menu .el-menu-item.is-active {
background-color: #2D3D51 !important;
color: #18909B !important;
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)