当 MUI 选择的大小设置为较小时，标签会错位

Question

当尺寸正常时，标签位置正确，但当尺寸改为较小时，标签被推到字段的底部。如何将标签定位在字段的中心？key 的初始值设置为空字符串。

<FormControl fullWidth>
  <InputLabel id="key-label">Key</InputLabel>
  <Select
    labelId="key-label"
    id="key"
    value={key}
    label="Key"
    onChange={handleChange}
    size="small"
  >
    <MenuItem value={"A"}>A</MenuItem>
    <MenuItem value={"B"}>B</MenuItem>
    <MenuItem value={"C"}>C</MenuItem>
  </Select>
</FormControl>

Answer 1

这不是一个错误。您也需要size="small"申请<FormControl>。

<FormControl fullWidth size="small">
  <InputLabel id="key">Label</InputLabel>
  <Select
    id="key"
    value={key}
    label="Key"
    onChange={handleChange}
    required
    size="small">
    <MenuItem value={"A"}>A</MenuItem>
    <MenuItem value={"B"}>B</MenuItem>
    <MenuItem value={"C"}>C</MenuItem>
  </Select>
</FormControl>

Answer 2

我决定用带有属性的元素Select替换。我还摆脱了和 的相关属性。现在看起来很棒。TextFieldselectInputLabellabelId

<FormControl fullWidth>
  <TextField
    select
    id="key"
    value={key}
    label="Key"
    onChange={handleChange}
    required
    size="small"
  >
    <MenuItem value={"A"}>A</MenuItem>
    <MenuItem value={"B"}>B</MenuItem>
    <MenuItem value={"C"}>C</MenuItem>
  </TextField>
</FormControl>