Antd select not working inside a full screen dialog

Question

I am using both materialui and antd as the ui component library in my react app. I have been using material ui's full screen dialog and tried to insert antd's select inside the dialog.

But looks like select list doesn't render correctly when placed inside material-ui's dialog component. I have tried to give antd select a very large zindex with absolute position but no luck.

Here's a the codesanbox link. You can the select work out the dialog but same select component doesn't render it's option list when placed inside the full screen dialog

https://codesandbox.io/s/1zvj51xmj

Answer 1

If I add dropdownStyle={{ zIndex: 2000 }} to the select it seems to work.

Answer 2

Add zIndex=20 to Dialog Component and zIndex=2000 to Select

 <Dialog
    open={openSetTagsDialog}
    onClose={SetTagsDialoghandleClose}
    aria-labelledby="form-dialog-setTags"
    maxWidth={"md"}
    style={{zIndex:20}}
  >
 <Select style={{zIndex:2000}}>{...options...}</Select>
<Dialog>