React Material UI：轮廓文本字段显示通过标签的线条

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

里面有一个<fieldset/>标签FormControl，<legend/>它的内部使白色块成为可能。

https://github.com/mui/material-ui/blob/de11911f2e3b15b9fe07ce2625a3ce1cc593093c/packages/mui-material/src/OutlinedInput/OutlinedInput.js#L142

https://github.com/mui/material-ui/blob/de11911f2e3b15b9fe07ce2625a3ce1cc593093c/packages/mui-material/src/OutlinedInput/NotchedOutline.js#L79

我不确定您的情况（<Select/>），但如果您尝试使用具有概述样式的原始输入，则必须将 label 属性赋予<OutlinedInput/>.

<FormControl fullWidth>
  <InputLabel>Phone</InputLabel>
  <OutlinedInput label="Phone" /> // without label="...", you get the line-through
</FormControl>