🧐[问题 | question]侧边栏收起后鼠标悬停气泡的背景色和文字颜色可以统一设置吗？

[BeDay]

🧐 问题描述 | Problem description

侧边栏收起后鼠标悬停气泡的背景色和文字颜色可以统一设置吗？可以设置成和菜单相同的背景色而不改变其他颜色

💻 示例代码 | Sample code

🚑 其他信息 | Other information

OS:

Node：

浏览器 | browser：

[dosubot]

Hi @BeDay! I'm Dosu and I’m helping the ant-design-pro team.

可以通过 ProLayout 的 token 配置来统一设置收起侧边栏后弹出菜单的背景色和文字颜色。关键 token 是 colorBgMenuItemCollapsedElevated，它专门控制收起后弹出菜单的背景色 [1]。

示例配置：

<ProLayout
  token={{
    sider: {
      colorBgMenuItemCollapsedElevated: 'rgba(0,0,0,0.85)', // 弹出菜单背景色
      colorTextMenu: 'rgba(255,255,255,0.75)',              // 默认文字颜色
      colorTextMenuSelected: '#fff',                         // 选中文字颜色
      colorBgMenuItemSelected: 'rgba(255,255,255,0.15)',    // 选中项背景
      colorBgMenuItemHover: 'rgba(255,255,255,0.06)',       // 悬停背景
      colorTextMenuItemHover: 'rgba(255,255,255,0.75)',     // 悬停文字颜色
    }
  }}
/>

[2]

这些 token 会通过 CSS 变量（如 --pro-layout-nav-popup-bg）注入到弹出菜单中，因为弹出层是挂载在 document.body 上的，不在侧边栏组件树内 [1]。这样你就可以将弹出菜单的样式设置成和侧边栏一致的背景色和文字颜色。

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[BeDay]

Hi @BeDay! I'm Dosu and I’m helping the ant-design-pro team.

可以通过 ProLayout 的 token 配置来统一设置收起侧边栏后弹出菜单的背景色和文字颜色。关键 token 是 colorBgMenuItemCollapsedElevated，它专门控制收起后弹出菜单的背景色 [1]。

示例配置：

<ProLayout
token={{
sider: {
colorBgMenuItemCollapsedElevated: 'rgba(0,0,0,0.85)', // 弹出菜单背景色
colorTextMenu: 'rgba(255,255,255,0.75)', // 默认文字颜色
colorTextMenuSelected: '#fff', // 选中文字颜色
colorBgMenuItemSelected: 'rgba(255,255,255,0.15)', // 选中项背景
colorBgMenuItemHover: 'rgba(255,255,255,0.06)', // 悬停背景
colorTextMenuItemHover: 'rgba(255,255,255,0.75)', // 悬停文字颜色
}
}}
/>
[2]

这些 token 会通过 CSS 变量（如 --pro-layout-nav-popup-bg）注入到弹出菜单中，因为弹出层是挂载在 document.body 上的，不在侧边栏组件树内 [1]。这样你就可以将弹出菜单的样式设置成和侧边栏一致的背景色和文字颜色。

To reply, just mention @dosu.

Share context across your team and agents. Try Dosu.

colorBgMenuItemCollapsedElevated 不生效
在 defaultSettings.ts 文件中配置如下
token: {
sider: {
colorMenuBackground: '#000', // menuItem 的背景颜色
colorTextMenuTitle: '#f9fafb', // menuItem 的标题字体颜色
colorTextMenu: '#d1d5db', // menuItem 的字体颜色
colorTextMenuItemHover: '#ffffff', // menuItem 的 hover 字体颜色
colorBgMenuItemHover: '#374151', // menuItem 的 hover 背景颜色
colorTextMenuSelected: '#ffffff', // menuItem 的选中字体颜色
colorTextMenuActive: '#fbbf24', // menuItem hover 的选中字体颜色
colorBgMenuItemSelected: '#374151', // menuItem 的选中背景颜色
colorBgMenuItemCollapsedElevated: '#EC0C0C',
},
},