如何解决React中的嵌套菜单项
我在React应用程序中显示TextField中的值时遇到问题。
我正在使用material UI和material-ui-phone-number作为其软件包。如您所见,单击标志后的值将显示在背面。我相信这是在zIndex上。请仅修改dialog2.js
请在此处检查我的代码和框 CLICK HERE
解决方法
可以通过以下更改来实现:
- 删除所有定义的CSS z-index
- 将对话框2放入对话框1内容
这是有效的CSB链接:https://codesandbox.io/s/nested-dialog-menuitem-dropdown-forked-wymm0?file=/dialog1.js
,您的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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。