reactjs - Material UI TextField 标签出现在 popper 上
问题描述
我正在使用 Material-UI,并且我有一个带有 TextFields 的表单。
当我激活 popper 时,表单文本字段中的标签会覆盖 popper,但不会覆盖字段本身。为什么它会叠加,我怎样才能移除叠加层以使 popper 位于顶部?
以下是相关代码:
<Popper id="userList" open={searchOptionsOpen} anchorEl={anchorEl} transition>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
<ClickAwayListener onClickAway={handleClose}>
<Paper fullWidth>
<Grid container>
<Grid item xs={12}>
<List className={styles.popperList}>
<ListItem>
<ListItemText className={styles.popperAddNewUser} primary="Add new user" />
</ListItem>
{fetchedUsers.map((user, index) => (
<ListItem key={index}>
<ListItemText>{user.displayName}</ListItemText>
</ListItem>
))}
</List>
</Grid>
</Grid>
</Paper>
</ClickAwayListener>
</Fade>
)}
</Popper>
</Grid>
<Grid item xs={12} className={styles.header}>
<Typography variant="h2">{t('users.add.userDetails')}</Typography>
</Grid>
<Grid item xs={6}>
<TextField
fullWidth
required
aria-labelledby="first-name-text"
id="firstName"
value={userDetails.firstName}
onChange={handleTextChange('userDetails')}
variant="outlined"
label={t('users.add.input.firstName')}
margin="dense"
className={styles.leftTextField}
/>
</Grid>
解决方案
尝试将 Popper 本身的 Z-Index 设置为更高的值,这将解决问题。
推荐阅读
- javascript - 如何停止弹出登录窗口?
- spring - Whitelabel 错误 Spring Boot - 项目结构
- javascript - 计算最大矩形大小,任意旋转,以适应边界框
- angular - 获取以角度代码返回 HttpErrorrResponse 的 API,错误代码 302 和错误包装的响应 json
- c++ - gdb 在 .so 文件中设置中断,没有命名的源文件
- firebase-realtime-database - Flutter 下拉菜单详细信息未保存到 Firestore
- spring-boot - 数据库用户未登录的 Spring Boot 安全性
- ios - AVAssetWriter - 设置自定义帧率
- javascript - 试图访问 var 中的最后一个元素
- docker - 将主机上运行的进程检测到 docker 容器中