Material ui 样式化使用材质界面选择v2-替换输入组件

我在将react select v2的输入组件替换为Material UI的输入组件时遇到问题

到目前为止，我在下面的codesandbox中进行了尝试，但在输入时无法调用过滤

此外，如果您对替代方案的实施有任何反馈，我们将不胜感激。我抓取单击选项的文本并从选项列表中搜索选项对象以传递给selectOption函数，这样做是否正确

非常感谢， Eric

V1

请参阅此处的文档：

它提供了有关如何将react select与材质ui一起使用的清晰文档

以下是您的问题的工作示例：

正如您所看到的，物料ui输入组件可以采用

react选择
作为
inputComponent

V2

这与前面的方法几乎相同：

实现输入组件：

<div className={classes.root}>
  <Input
   fullWidth
    inputComponent={SelectWrapped}
    value={this.state.value}
    onChange={this.handleChange}
    placeholder="Search your color"
    id="react-select-single"
    inputProps={{
     options: colourOptions
    }}
  />
</div>

我覆盖了component选项和DropdownIndicator，使其更具材质，并添加了
customStyles
：

const customStyles = {
  control: () => ({
    display: "flex",
    alignItems: "center",
    border: 0,
    height: "auto",
    background: "transparent",
    "&:hover": {
      boxShadow: "none"
    }
  }),
  menu: () => ({
    backgroundColor: "white",
    boxShadow: "1px 2px 6px #888888", // should be changed as material-ui
    position: "absolute",
    left: 0,
    top: `calc(100% + 1px)`,
    width: "100%",
    zIndex: 2,
    maxHeight: ITEM_HEIGHT * 4.5
  }),
  menuList: () => ({
    maxHeight: ITEM_HEIGHT * 4.5,
    overflowY: "auto"
  })
};

和选择：

class Option extends React.Component {
  handleClick = event => {
    this.props.selectOption(this.props.data, event);
  };

  render() {
    const { children, isFocused, isSelected, onFocus } = this.props;
    console.log(this.props);
    return (
      <MenuItem
        onFocus={onFocus}
        selected={isFocused}
        onClick={this.handleClick}
        component="div"
        style={{
          fontWeight: isSelected ? 500 : 400
        }}
      >
        {children}
      </MenuItem>
    );
  }
}

class选项扩展了React.Component{
handleClick=事件=>{
this.props.selectOption（this.props.data，事件）；
};
render（）{
const{children，isFocused，isSelected，onFocus}=this.props；
console.log（this.props）；
返回(
{儿童}
);
}
}

请从这里查找示例：

请参阅react select中的文档，如果愿意，您可以添加更多更改

希望这些能对你有所帮助。
你好@gluttony，谢谢你的回复。但是，我正在寻找使用react select版本2（即我的codesandbox示例中的2.0.0-beta6）的解决方案。我已经看过material-ui.com/demos/autocomplete中的文档，不幸的是它是针对react select的版本1的。Regards@Nadun我相信这两个代码沙盒示例现在都过时了。
class Option extends React.Component {
  handleClick = event => {
    this.props.selectOption(this.props.data, event);
  };

  render() {
    const { children, isFocused, isSelected, onFocus } = this.props;
    console.log(this.props);
    return (
      <MenuItem
        onFocus={onFocus}
        selected={isFocused}
        onClick={this.handleClick}
        component="div"
        style={{
          fontWeight: isSelected ? 500 : 400
        }}
      >
        {children}
      </MenuItem>
    );
  }
}