多选标签被输入字段的轮廓划掉

Question

我用 Material-UI 制作了一个多选列表。但是，当我选择一个项目时，标签应该缩小并适合输入字段的轮廓。问题是轮廓保持不变，而标签在其后面缩小。

我尝试在 Material-UI 文档中寻找解决方案。似乎没有任何多重选择列表概述变体。所以我想知道这是否是因为多重选择列表没有概述的变体，或者是由于其他原因。

<FormControl
   variant="outlined"
   fullWidth
>
   <InputLabel
      ref={ref => {
         this.InputLabelRef = ref;
      }}
      htmlFor="members"
      error={this.props.touched.members && Boolean(this.props.errors.members)}
   >
      Members
   </InputLabel>
   <Select
      onChange={this.change.bind(null, "members")}
      multiple
      value={this.state.members}
      error={this.props.touched.members && Boolean(this.props.errors.members)}
       input={
          <OutlinedInput
              labelWidth={0}
              name="members"
              id="members"
          />
        }
     >
     <MenuItem value={'Baspa'}>Baspa</MenuItem>
     <MenuItem value={'Plorky'}>Plorky</MenuItem>
     <MenuItem value={'Rizzels'}>Rizzels</MenuItem>
    </Select>

我还做了一个CodeSandBox： https://codesandbox.io/s/jnlx1vky39

这就是它的样子：

https://i.sstatic.net/1ZIgc.jpg

Answer 1

您缺少文档中显示的几部分，这些部分允许轮廓知道标签宽度：

  componentDidMount() {
    this.setState({
      labelWidth: ReactDOM.findDOMNode(this.InputLabelRef).offsetWidth
    });
  }
... 
 <OutlinedInput labelWidth={this.state.labelWidth} name="members" id="members" />

完整代码如下：

Answer 2

原来的答案不再正确。根据已解决的 MUI 问题，不再支持 labelWidth。相反，将

label

上的

<OutlinedInput>

设置为与

label

上的

<InputLabel>

匹配。例如：

<InputLabel id="foo">{tag}</InputLabel>
   <Select
      input={<OutlinedInput label={tag} />}

MUI 文档

中的完整示例

Answer 3

如果有人最近遇到这个问题，我可以通过执行以下操作来解决：

<InputLabel id="foo">Members</InputLabel>
 <Select
   labelId="foo"
   label="Members"
   ....
  />