Material UI - Select - 如何使用输入道具？答案

【问题标题】：Material UI - Select - how to use the input prop?Material UI - Select - 如何使用输入道具？
【发布时间】：2021-07-19 12:09:27
【问题描述】：

来自文档：

一个输入元素；不必是特定于 Material-ui 的输入。

当我使用材质输入时，它可以工作但是当使用<input/> 时，open-arrow-icon 消失了，并且无法打开选择。

我想使用 Material-UI Select，我自己的自定义输入不是 materail-UI 输入。

工作

<Select
      
      value={value}
      onChange={_onChange}
      classes={classes}
      input={<MaterialUiInput />} //this line
    >
      {manuItems}
    </Select>

不工作

<Select
      
      value={value}
      onChange={_onChange}
      classes={classes}
      input={<input />} //this line
    >
      {manuItems}
    </Select>

【问题讨论】：

您能否编写代码并解释您要实现的目标？
添加了@GouthamJ.M
有什么特殊原因需要使用自定义输入吗？
你能在codesandbox中重现你的错误吗？
@GiovanniEsposito 没有错误。我不明白如何使用带有自定义输入的material-ui选择组件，这不是material-ui输入。

标签： reactjs material-ui

【解决方案1】：

我看了源码才知道只有给Material UI输入才可以得到Arrow和Select Props的Options，如果给native input那么只会通过，你可以用在下图中，您可以使用自定义样式设置 Material UI 的输入样式，因此没有理由使用原生输入

材质 UI 输入：

本机输入：

【讨论】：

我在公司开发了一个设计系统。我们有一定的逻辑和风格的输入。我想用这个输入创建一个下拉菜单，并使用材料选择。如果我需要自己实现，那么它会超出使用 Material ui 选择的目的。