// 设置菜单样式
.ant-menu,.ant-menu-sub,.ant-menu-inline{
color: var(--white);
background-color: ${bgColor} !important;
}
// 设置子菜单展开样式
.ant-menu-submenu > .ant-menu {
color: var(--white);
background-color: ${bgColor} !important;
}
.ant-menu-submenu-title{
color: var(--white) !important;
}
// 下拉箭头样式
/* .ant-menu-submenu-arrow {
color: white !important;
} */
// 菜单收缩样式
.ant-menu.ant-menu-inline-collapsed {
width: ${minMenuW};
}
// 设置收缩后的右边框
.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
border-right: none;
}
// 气泡框样式
.ant-tooltip-inner,.ant-tooltip-arrow-content{
background-color: ${bgColor} !important;
}
.ant-tooltip-inner a {
color: var(--white) !important;
}
// 收缩的样式
.ant-layout-sider-trigger {
background-color: ${bgColor} !important;
}
// sider 的背景色
.ant-layout-sider {
background-color: ${bgColor} !important;
flex: 0 0 ${maxMenuW} !important;
max-width: ${maxMenuW} !important;
min-width: ${maxMenuW} !important;
width: ${maxMenuW} !important;
}
.ant-layout-sider-collapsed {
flex: 0 0 ${minMenuW} !important;
max-width: ${minMenuW} !important;
min-width: ${minMenuW} !important;
width: ${minMenuW} !important;
}
.ant-menu-item {
width: 100%;
margin-left: 0;
border-radius: unset !important;
border-left: ${menuLeftPx} solid transparent;
}
// 选中菜单状态
.ant-menu-item-selected {
color: var(--primary-color) !important;
background-color: ${bgHoverColor} !important;
border-color: var(--primary-color);
}
// 设置未选中菜单项鼠标滑过样式
.ant-menu-item-active {
color: var(--white) !important;
background-color: ${bgHoverColor} !important;
}
标签:菜单,width,样式,menu,ant,color,important,var,antd
From: https://www.cnblogs.com/DL-CODER/p/17584681.html