问题描述
我在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>