reactjs - react Material 用户界面 : Outlined text field shows line through label

Question

我正在使用 MUI 5 和 React，我遇到了这个问题，即根据屏幕截图，轮廓文本字段显示了穿过标签的线

我不知道如何修复它。

我的字段看起来像这样

<FormControl fullWidth variant="outlined">
      <InputLabel shrink id={labelId}>
        {label}
      </InputLabel>
      <Controller
        as={
          <Select
            displayEmpty
            name={name}
            labelId={labelId}
            id={name}
            label={label}
          >
            <MenuItem key={`no${name}`} value="">
              {intl.formatMessage({
                defaultMessage: 'No proxy number',
              })}
            </MenuItem>
            {items.map(pn => (
              <MenuItem key={pn.id} value={pn.id}>
                <ListItemIcon>
                  <img
                    src={pn?.country?.flagIconUrl}
                    alt={pn.countryCode}
                    width="20px"
                    height="15px"
                  />
                </ListItemIcon>
                {pn.value}
              </MenuItem>
            ))}
          </Select>
        }
        name={name}
        control={control}
      />
      <FormHelperText>{helperText}</FormHelperText>
    </FormControl>

然后将上面的作为调用SelectFormInput的函数来制作具体的字段

<Grid item xs={6}>
            <SelectFormInput
              control={control}
              labelId="proxyNumber"
              name="proxyNumber"
              items={proxyNumbers}
              label={intl.formatMessage({
                defaultMessage: 'Proxy phone Number',
              })}
              helperText={intl.formatMessage({
                defaultMessage: 'Optional. Phone number used by site users',
              })}
            />
          </Grid>

          <Grid item xs={6}>
            <SelectFormInput
              control={control}
              labelId="inboundProxyNumber"
              name="inboundProxyNumber"
              items={inboundProxyNumbers}
              label={intl.formatMessage({
                defaultMessage: 'Inbound Proxy Number',
              })}
              helperText={intl.formatMessage({
                defaultMessage: 'Optional. Phone number seen by candidate',
              })}
            />
          </Grid>

我无法在网上找到适合我具体情况的任何解决方案。

Answer 1

我找到了一个对我的具体情况有所帮助的解决方案。我必须添加这个

input={<OutlinedInput notched label={label} />}

我的内心

<Select
     displayEmpty
     name={name}
     labelId={labelId}
     id={name}
     input={<OutlinedInput notched label={label} />} />

因此标签 UI 已修复