Material UI TextField label 出現在popper上

Question

我正在使用 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>

Answer 1

嘗試將 Popper 本身的 Z-Index 設置為更高的值，這將解決問題。