React中的嵌套菜单项

Question

我在React应用程序中显示TextField中的值时遇到问题。 我正在使用material UI和material-ui-phone-number作为其软件包。如您所见，单击标志后的值将显示在背面。我相信这是在zIndex上。请仅修改dialog2.js

请在此处检查我的代码和框 CLICK HERE

Answer 1

可以通过以下更改来实现：

1. 删除所有定义的CSS z-index
2. 将对话框2放入对话框1内容

这是有效的CSB链接：https://codesandbox.io/s/nested-dialog-menuitem-dropdown-forked-wymm0?file=/dialog1.js

Answer 2

您的MuiPhoneNumber使用MUI模式进行国家/地区选择，其默认z-index为1300。看起来他们似乎没有公开更改其CSS属性的道具，所以您可以使用任何首选的样式解决方案来定位#country-menu（模态的ID）

<div>
  <style type="text/css">
    {`
    #country-menu {
      z-index: 1801;
    }
    `}
  </style>
  <DialogContent style={{ width: 300, height: 500 }}>
    <MuiPhoneNumber
      name="MobileNo"
      label="Mobile No."
      variant="outlined"
      fullWidth
      defaultCountry={"vn"}
      value={selectedValue}
      onChange={(e) => setSelectedValue(e)}
    />
  </DialogContent>
</div>