ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.3k stars 1.36k forks source link

🧐[问题]不是暗黑模式,如何只让菜单部分表先暗黑模式的效果 #8593

Open freesaber opened 3 months ago

freesaber commented 3 months ago

下面是根据官方文档进行的配置,但是效果不理想。想问一下,有没有现成的配置值,是暗黑模式的菜单表现

        token={{
          sider: {
            colorMenuBackground: '#141414', // menu 的背景颜色
            colorTextMenuTitle: '#ffffff', // sider 的标题字体颜色
            colorMenuItemDivider: '#303030', // menuItem 分割线的颜色
            colorTextMenu: '#ffffff', // menuItem 的字体颜色
            colorTextMenuSecondary: 'rgba(255, 255, 255, 0.65)', // menu 的二级字体颜色,比如 footer 和 action 的 icon
            colorTextMenuSelected: 'rgba(255, 255, 255, 0.85)', // menuItem 的选中字体颜色
            colorTextMenuActive: 'rgba(255, 255, 255, 0.85)', // menuItem hover 的选中字体颜色
            colorTextMenuItemHover: 'rgba(255, 255, 255, 0.75)', // menuItem 的 hover 字体颜色
            colorBgMenuItemActive: '#1890ff', // menuItem 的点击时背景颜色
            colorBgMenuItemHover: 'rgba(24, 144, 255, 0.1)', // menuItem 的 hover 背景颜色
            colorBgMenuItemSelected: '#1890ff', // menuItem 的选中背景颜色
            colorBgMenuItemCollapsedElevated: '#141414', // 收起 menuItem 的弹出菜单背景颜色
            colorBgCollapsedButton: '#141414', // 展开收起按钮背景颜色
            colorTextCollapsedButton: '#ffffff', // 展开收起按钮字体颜色
            colorTextCollapsedButtonHover: 'rgba(255, 255, 255, 0.85)', // 展开收起按钮 hover 时字体颜色
          },
        }}

另外,好像菜单折叠后,展开的二级菜单背景色没有被自定义。 image

官方的示例也有这个问题 image

freesaber commented 3 months ago

想要这个效果的配置值 image

freesaber commented 3 months ago

样式值被覆盖了,不知道是哪里导致的。这个会优化吗?官方示例也是有bug。 image

token={{
          sider: {
            colorMenuBackground: '#001529', // menu 的背景颜色
            colorMenuItemDivider: 'rgba(255, 255, 255, 0.15)', // menuItem 分割线的颜色
            colorTextMenu: '#a6aaae', // menuItem 的字体颜色
            colorTextMenuSecondary: '#a6aaae', // menu 的二级字体颜色,比如 footer 和 action 的 icon
            colorTextMenuSelected: '#ffffff', // menuItem 的选中字体颜色
            colorTextMenuActive: '#ffffff', // menuItem hover 的选中字体颜色
            colorTextMenuItemHover: '#ffffff', // menuItem 的 hover 字体颜色
            colorBgMenuItemActive: 'rgba(0, 0, 0, 0.15)', // menuItem 的点击时背景颜色
            colorBgMenuItemHover: 'rgba(90, 75, 75, 0.03)', // menuItem 的 hover 背景颜色
            colorBgMenuItemSelected: '#1890ff', // menuItem 的选中背景颜色
          },
        }}
wangyang-o commented 2 months ago

有相同的问题,楼上的解决了吗 并且看到有一个:colorBgMenuItemCollapsedElevated,设置了没有效果