为什么 Material-UI Select 元素不能正确显示标签轮廓？答案

【问题标题】：Why does Material-UI Select element not display label outline correctly?为什么 Material-UI Select 元素不能正确显示标签轮廓？
【发布时间】：2022-11-01 11:59:49
【问题描述】：

以下代码用于显示带有标签的 MUI (v5.2.3) Select 元素。

<FormControl className={classes.formControl} disabled={props.disabled}>
  <InputLabel id="waiverStatus">Waiver Status</InputLabel>
  <Select
    name={props.name}
    value={props.waiverStatusID.toString()}
    labelId="waiverStatus"
    onChange={handleWaiverStatusChange}
  >
    {props.waiverStatus.map((vs: WaiverStatus) => (
      <MenuItem key={vs.waiverStatusID} value={vs.waiverStatusID}>{vs.status}</MenuItem>
    ))}
  </Select>
</FormControl>

但是，当渲染选择元素时，围绕该元素绘制的“轮廓”在标签上具有“删除线”效果。相比之下，文本字段控件可以正确显示标签。

为什么 Select 元素不能像文本字段一样正确显示轮廓？

【问题讨论】：

标签： material-ui

【解决方案1】：

Select 组件内缺少标签。你必须使用标签在两个地方。一个用于InputLabel，另一个用于Select。这是您的解决方法，我刚刚添加了标签支持Select:

  <FormControl className={classes.formControl} disabled={props.disabled}>

    <InputLabel id="waiverStatus">Waiver Status</InputLabel>

    <Select
      label="Waiver Status"
      name={props.name}
      value={props.waiverStatusID.toString()}
      labelId="waiverStatus"
      onChange={handleWaiverStatusChange}
    >
      {props.waiverStatus.map((vs: WaiverStatus) => (
        <MenuItem key={vs.waiverStatusID} value={vs.waiverStatusID}>
          {vs.status}
        </MenuItem>
      ))}
    </Select>

  </FormControl>

【讨论】：