Material UI TextField 标签出现在 popper 上方

Question

我正在使用 Material-UI 并且我有一个带有 TextFields 的表单。

当我激活弹出器时，表单文本字段中的标签会覆盖弹出器，但不会覆盖字段本身。为什么它会叠加，我怎样才能移除叠加层以便 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>

Answer 1

尝试将 Popper 本身的 Z-Index 设置为更高的值，这将解决问题。

Material UI TextField 标签出现在 popper 上方

Material UI TextField label appears over the popper

reactjs

material-ui

popper.js