Reactjs 如何使用ANT设计菜单项并将组件上传到位？

我使用React+Typescript+ANT设计

我正在制作一个菜单，其中一项负责导入，但在这种情况下，菜单项看起来不正确：

代码如下：

<Menu.ItemGroup title={"Actions"}>
     <Menu.Item onClick={}><Icon type="save"/>{"Save"}</Menu.Item>
     <Menu.Item onClick={}><Icon type="delete"/>{"Delete"}</Menu.Item>
     <Upload customRequest={} showUploadList={false} accept=".txt">
           <Menu.Item onClick={}><Icon type="import"/>{"Import"}</Menu.Item>
     </Upload>
     <Menu.Item onClick={}><Icon type="export"/>{"Export"}</Menu.Item>
</Menu.ItemGroup>

{“保存”}
{“删除”}
{“导入”}
{“导出”}

我会尝试切换

和

组件的使用顺序：

<Menu.ItemGroup title={"Actions"}>
     <Menu.Item onClick={}><Icon type="save">{"Save"}</Menu.Item>
     <Menu.Item onClick={}><Icon type="delete">{"Delete"}</Menu.Item>
     <Menu.Item onClick={}><Icon type="import">
        <Upload customRequest={} showUploadList={false} accept=".txt">
           {"Import"}
        </Upload>
     </Menu.Item>
     <Menu.Item onClick={}><Icon type="export">{"Export"}</Menu.Item>
</Menu.ItemGroup>

{“保存”}
{“删除”}
{“导入”}
{“导出”}

我会尝试切换

和

组件的使用顺序：

<Menu.ItemGroup title={"Actions"}>
     <Menu.Item onClick={}><Icon type="save">{"Save"}</Menu.Item>
     <Menu.Item onClick={}><Icon type="delete">{"Delete"}</Menu.Item>
     <Menu.Item onClick={}><Icon type="import">
        <Upload customRequest={} showUploadList={false} accept=".txt">
           {"Import"}
        </Upload>
     </Menu.Item>
     <Menu.Item onClick={}><Icon type="export">{"Export"}</Menu.Item>
</Menu.ItemGroup>

{“保存”}
{“删除”}
{“导入”}
{“导出”}

此解决方案不好，因为上载按钮无法覆盖整个系统。此解决方案不好，因为上载按钮无法覆盖整个系统。