React+Antd水平Menu设置space-around均匀分布不生效如何解决

你可以通过自定义CSS覆盖Antd默认样式实现需求，步骤如下：

1. 给Menu组件添加自定义类名，避免全局污染其他Menu组件
2. 针对该类名下的内部ul容器设置flex布局规则
3. 确保菜单容器宽度占满父级，否则间距规则不会生效

代码示例 #

组件代码：

import { Menu } from 'antd';
import './Navigation.css';

const Navigation =()=>{
return (
    <>
        <Menu 
          mode="horizontal" 
          theme="light"
          className="custom-nav-menu"
        >
            <Menu.Item key="home" >
                홈
            </Menu.Item>
            <Menu.Item key="message">
                쪽지
            </Menu.Item>
            <Menu.Item key="post">
                게시판
            </Menu.Item>
            <Menu.Item key="homepage">
                홈페이지
            </Menu.Item>
        </Menu>
    </>
)}

对应的Navigation.css样式代码：

/* 自定义菜单容器占满父级宽度 */
.custom-nav-menu {
  width: 100%;
}

/* 覆盖内部ul容器的布局规则 */
.custom-nav-menu .ant-menu-horizontal {
  display: flex !important;
  justify-content: space-around !important;
}

如果想要实现菜单项宽度平分、内容居中的效果，还可以补充以下样式：

.custom-nav-menu .ant-menu-horizontal .ant-menu-item {
  flex: 1;
  display: flex;
  justify-content: center;
}

• 若使用CSS Modules，需要用:global包裹Antd的内置类名，避免类名被编译后无法匹配
• 若使用Antd v5的CSS-in-JS方案，也可以通过styled组件包裹Menu实现样式覆盖，逻辑和上述自定义CSS一致

内容的提问来源于stack exchange，提问作者Seung