Select 文本字段中的道具 material-ui

Question

我的文本字段有一个错误，我怎么能让我的地图标签每次都在下拉菜单的中间而不是在他的左上角提升？谢谢！

https://gyazo.com/bee6945888e3f133de983cece3565d69

              <TextField
                select
                defaultValue
                variant="outlined"
                size="small"
                value={filter.map ?? ""}
                onChange={(event) => handleChangeValue(event)}
                label="Maps"
                name="map"
                className={classes.formControl}>
                <Box display="flex" justifyContent="center">
                  <MenuItem className={classes.formControl} value="">All Maps</MenuItem>
                </Box>
                <MenuItem className={classes.formControl} value="de_inferno"><img src={infernoIcon} height="20px" />&nbsp; &middot; &nbsp;de_inferno</MenuItem>
                <MenuItem className={classes.formControl} value="de_dust2"><img src={d2Icon} height="20px" />&nbsp; &middot; &nbsp;de_dust2</MenuItem>
                <MenuItem className={classes.formControl} value="de_mirage"><img src={mirageIcon} height="20px" />&nbsp; &middot; &nbsp;de_mirage</MenuItem>
                <MenuItem className={classes.formControl} value="de_nuke"><img src={nukeIcon} height="20px" />&nbsp; &middot; &nbsp;de_nuke</MenuItem>
                <MenuItem className={classes.formControl} value="de_train"><img src={trainIcon} height="20px" />&nbsp; &middot; &nbsp;de_train</MenuItem>
                <MenuItem className={classes.formControl} value="de_overpass"><img src={overpassIcon} height="20px" />&nbsp; &middot; &nbsp;de_overpass</MenuItem>
                <MenuItem className={classes.formControl} value="de_vertigo"><img src={vertigoIcon} height="20px" />&nbsp; &middot; &nbsp;de_vertigo</MenuItem>
              </TextField>

Answer 1

您可以使用 onClose 模糊聚焦的文本字段，如下所示：

    ...
    label="Maps"
    name="map"
    SelectProps={{
      onClose: () => {
        setTimeout(() => {
          document.activeElement.blur();
        }, 0);
      },
    }}
    ...

Select 文本字段中的道具 material-ui

Select props in Textfield material-ui

select

menuitem

textfield

reactjs

material-ui