How to use ANT Design Menu.Item and Upload components in place?

I use React + Typescript + ANT Design

I am making a menu in which one of the items is responsible for import, but in this case the menu item does not look correct:

enter image description here

Here is the code:

<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>

1 answer

  • answered 2020-10-23 12:03 norbitrial

    I would try switching the order of usage at <Upload> and <Menu.Item> components:

    <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>