ant-design 水平模式下 menu item 无法设置 margin,token 中设置 itemMarginInline 无效

sc4hvdpw  于 21天前  发布在  其他
关注(0)|答案(4)|浏览(16)

Steps to reproduce

<ConfigProvider
      theme={{
        components: {
          Menu: {
            itemMarginInline: 12,
          },
        },
      }}
    >
      <Menu
        defaultSelectedKeys={["2"]}
        items={items}
        style={{ flex: 1, minWidth: 0 }}
      />
      <Menu
        theme="dark"
        mode="horizontal"
        defaultSelectedKeys={["2"]}
        items={items}
        style={{ flex: 1, minWidth: 0 }}
      />
    </ConfigProvider>

垂直模式下 itemMarginInline 有效,水平模式下无效

What is expected?

水平模式支持调整 margin

What is actually happening?

不支持调整 margin
| Environment | Info |
| ------------ | ------------ |
| antd | 5.16.0 |
| React | 18.2.0 |
| System | macOS Sonoma 14.2.1 |
| Browser | Chrome 123.0.6312.87 |

menu 组件代码中确实没看到处理 margin token,是因为影响到折叠功能吗?因为 rc-overflow 不支持 margin?

hgncfbus

hgncfbus1#

如果是因为 rc-overflow 不支持的原因,有两种方案,不知道哪一种会比较合适

  1. 增加 rc-overflow 对 margin 的支持
  2. 调整 menu item 的 dom 结构,以便于支持修改 item 的 margin
rqqzpn5f

rqqzpn5f2#

codesandbox required permissions to access it.

ttygqcqt

ttygqcqt3#

Hello @shanlan-L. Please provide a online reproduction by forking codesandbox of antd@5.x or antd@4.x , or provide a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @shanlan-L,我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 antd@5.xantd@4.x 的 codesandbox,或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
什么是最小化重现,为什么这是必需的?

5kgi1eie

5kgi1eie4#

codesandbox required permissions to access it.

click it
Inspect the elements and you will find that for the menu in horizontal mode, the margin has not been successfully added.

相关问题