reactjs 当MUI选择的大小设置为小时，标签未对齐

kuhbmx9i 于 2022-12-03 发布在 React

关注(0)|答案(3)|浏览(162)

当大小正常时，标签的位置是正确的，但当它变小时，标签被推到字段的底部。我如何将标签定位在字段的中心？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>

reactjs

来源：https://stackoverflow.com/questions/70732076/label-gets-misaligned-when-size-of-mui-select-is-set-to-small

3条答案

按热度按时间

kknvjkwl1#

这不是一个错误。您应该将size=“small”应用于而不是Select。

<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>

赞(0）回复(0）举报 2022-12-03

ctehm74n2#

我决定用select属性的TextField元素替换Select。我还去掉了InputLabel和相关的labelId属性。现在看起来很棒。

<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>

赞(0）回复(0）举报 2022-12-03

bfnvny8b3#

请这样使用，
在InputLabel中，您必须设置size=“small”

<FormControl fullWidth size="small" >
 <InputLabel size="small" id="role">Role</$InputLabel>
    <Select
       labelId="role"
       id="role"
       name="role"
       label="Role"
       size="small"
    />

赞(0）回复(0）举报 2022-12-03

我来回答

reactjs 当MUI选择的大小设置为小时，标签未对齐

3条答案

相关问题

热门标签

最新问答