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

sc4hvdpw 于 4个月前发布在其他

关注(0)|答案(4)|浏览(53)

Reproduction link

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？

ant-design

来源：https://github.com/ant-design/ant-design/issues/48305

4条答案

按热度按时间

hgncfbus1#

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

增加 rc-overflow 对 margin 的支持
调整 menu item 的 dom 结构，以便于支持修改 item 的 margin

赞(0）回复(0）举报 4个月前

rqqzpn5f2#

codesandbox required permissions to access it.

赞(0）回复(0）举报 4个月前

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.x 或 antd@4.x 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
什么是最小化重现，为什么这是必需的？