React 中的嵌套菜单项

Question

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

请在这里查看我的codesandbox CLICK HERE

Answer 1

这可以通过进行以下更改来实现：

删除所有 CSS z-index 定义的
将对话 2 放在对话 1 的内容中

这是工作中的 CSB Link：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>

React 中的嵌套菜单项

Nested Menu Item in React

css

reactjs

material-ui

jss

react-hooks