antd menu 样式修改
Posted 咿呀咿呀哟
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了antd menu 样式修改相关的知识,希望对你有一定的参考价值。
记录一下antd 中,table 样式修改, 方便大家快速使用
基本上按照以下代码修改相应颜色即可
// 设置菜单样式
.ant-menu,.ant-menu-sub,.ant-menu-inline{
color: white;
background-color: #044d50 !important;
}
// 设置子菜单展开样式
.ant-menu-submenu > .ant-menu {
background-color: rgb(16, 71, 83) !important;
}
.ant-menu-submenu-title{
color: white !important;
}
// 去掉右边框
.ant-menu-inline {
border: none;
}
// 设置 a 链接样式
.ant-menu-item a {
color: white !important;
}
.ant-menu-item a:hover {
color: #044d50 !important;
}
// 下拉箭头样式
.ant-menu-submenu-arrow {
color: white;
}
// // 设置子菜单样式
// .ant-menu-submenu-active {
// background-color: #fff !important;
// color: #044d50 !important;
// }
// 选中菜单状态
.ant-menu-item-selected {
background-color: rgb(4,77,92) !important;
color: white !important;
}
// 设置未选中菜单项鼠标滑过样式
.ant-menu-item-active {
background-color: #fff !important;
color: #666666 !important;
}
切记:
.ant-menu-item-selected 和 .ant-menu-item-active 先后顺便不能乱, 否则点击菜单后样式错乱
以上是关于antd menu 样式修改的主要内容,如果未能解决你的问题,请参考以下文章