选择，具有收缩属性的 OutlineInput 标签与空时的 TextField 不同

Question

如果我使用 TextField 组件，并设置 InputLabelProps={{shrink: true}}，则标签将保留在 TextField 的顶部，并且轮廓将被剪切以正确显示标签。

但是，如果我使用 Select 组件，如下所示：

<FormControl variant={ this.props.variant }  className={ classes.formControl } fullWidth>
            <InputLabel
                ref={ (input) =>{ this.inputLabel = input }}
                htmlFor={ this.props.id }
                shrink={ true }>
                { this.props.label }
            </InputLabel>
            <Select
                id={ this.props.id }
                value={ this.props.value }
                onChange={ this.onChange }
                input={
                    <OutlinedInput
                        labelWidth={ this.state.labelWidth }
                        name={ this.props.id }
                        id={ this.props.id }
                    />
                    }
                >
                { this.props.options.map(option => (
                    <MenuItem key={ option.value } value={ option.value }>
                        <em>{ option.label }</em>
                    </MenuItem>
                ))}
            </Select>
        </FormControl>

Label 与 TextField 一样位于轮廓的顶部，但是轮廓并没有被剪掉以很好地显示 Label，而是看起来像是被“划掉”了

我做错了什么？ （请注意， this.state.labelWidth 有一个正确的值，即使我对此进行硬编码，它仍然不起作用）

预先感谢您的帮助 干杯 杰森

Answer 1

默认行为是

shrink

的

InputLabel

属性由 Material-UI 自动管理。一般来说，仅当

shrink

具有非空值或具有焦点时才应用

Select

。如果您希望始终应用

shrink

，那么您还需要在

notched

上指定

OutlinedInput

（在 v4 中，在 v5 中为

Select

），因为这是控制沿大纲。

下面的 v4 代码（下面的 v5 示例）显示了两种情况（1. 始终应用

shrink

和

notched

，2. 让 MUI 管理

shrink

和

notched

）：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  }
}));

function SimpleSelect() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    age: ""
  });

  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(0);
  React.useEffect(() => {
    setLabelWidth(inputLabel.current.offsetWidth);
  }, []);

  function handleChange(event) {
    setValues(oldValues => ({
      ...oldValues,
      [event.target.name]: event.target.value
    }));
  }

  return (
    <form className={classes.root} autoComplete="off">
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel
          shrink
          ref={inputLabel}
          htmlFor="outlined-age-always-notched"
        >
          Age
        </InputLabel>
        <Select
          value={values.age}
          onChange={handleChange}
          input={
            <OutlinedInput
              notched
              labelWidth={labelWidth}
              name="age"
              id="outlined-age-always-notched"
            />
          }
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel ref={inputLabel} htmlFor="outlined-age-simple">
          Age
        </InputLabel>
        <Select
          value={values.age}
          onChange={handleChange}
          input={
            <OutlinedInput
              labelWidth={labelWidth}
              name="age"
              id="outlined-age-simple"
            />
          }
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </form>
  );
}

export default SimpleSelect;

这是一个类似的 v5 示例，由于不需要显式指定

input

组件，因此更简单：

import * as React from "react";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select, { SelectChangeEvent } from "@mui/material/Select";

export default function BasicSelect() {
  const [age, setAge] = React.useState("");

  const handleChange = (event: SelectChangeEvent) => {
    setAge(event.target.value as string);
  };

  return (
    <>
      <FormControl sx={{ minWidth: 120, margin: 1 }}>
        <InputLabel shrink id="demo-simple-select-label">
          Age
        </InputLabel>
        <Select
          notched
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
      <FormControl sx={{ minWidth: 120, margin: 1 }}>
        <InputLabel id="demo-simple-select-label2">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label2"
          id="demo-simple-select2"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </>
  );
}

Answer 2

最后一个答案有一个已弃用的道具

labelWidth

对于较新的 MUI，只需将

shrink

属性添加到 InputLabel 组件，并将

notched

属性添加到 Select 组件。

有关问题和解决方案的更多信息请参见此处。 https://github.com/mui/material-ui/issues/22799

Answer 3

要在不剪切标签的情况下正常工作，您必须使用 InputLabel 组件，在 Select 组件的 labelId 中引用它，并在 Select 参数中重复选择标签。

见下图：

<FormControl fullWidth>
  <InputLabel id="demo-simple-select-label">Age</InputLabel>
  <Select labelId="demo-simple-select-label" id="demo-simple-select" value={age} label="Age" onChange={handleChange}>
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl>

请注意，选择标签“Age”位于 InputLabel 组件内部，并在 Select label 属性中重复。

请参阅文档：https://mui.com/material-ui/react-select/

Answer 4

希望这有帮助:)

<FormControl fullWidth>
    <InputLabel shrink>Label</InputLabel>
    <Select label="Label" defaultValue={undefined} notched>
        <MenuItem value="1">One</MenuItem>
        <MenuItem value="2">Two</MenuItem>
    </Select>
</FormControl>

<TextField
    label="Label"
    slotProps={{
        inputLabel: {
        shrink: true,
        },
    }}
/>

https://stackblitz.com/edit/vitejs-vite-jsxsscjo?file=src%2FApp.tsx