首页 > 其他分享 >antd 改变导航菜单的样式

antd 改变导航菜单的样式

时间:2023-07-27 13:33:40浏览次数:39  
标签:菜单 width 样式 menu ant color important var antd

// 设置菜单样式
.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

相关文章