时间戳

首页 > 解决方案 > 使用 material-ui 样式化 react-select v2 - 替换输入组件

material-ui - 使用 material-ui 样式化 react-select v2 - 替换输入组件

问题描述

我在将 react-select v2 的 Input 组件替换为 Material UI 中的 Input 组件时遇到问题。

到目前为止，我已经在下面的代码和框中进行了尝试，但是在输入输入时无法调用过滤？

https://codesandbox.io/s/jjjwoj3yz9

此外，我们将不胜感激有关选项替换实施的任何反馈。我是否以正确的方式获取单击选项的文本并从我的选项列表中搜索选项对象以传递给 selectOption 函数？

非常感谢，埃里克

标签： material-uireact-select

解决方案

V1

从这里参考文档：https ://material-ui.com/demos/autocomplete/

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

这是您问题的一个工作示例：https ://codesandbox.io/s/p9jpl9l827

如您所见，material-ui Input 组件可以react-select采用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>

然后SelectWrapped组件实现应该是：

function SelectWrapped(props) {
  const { classes, ...other } = props;

  return (
    <Select
      components={{
        Option: Option,
        DropdownIndicator: ArrowDropDownIcon
      }}
      styles={customStyles}
      isClearable={true}
      {...other}
    />
  );
}

并且我覆盖了组件 Option 和 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>
    );
  }
}

请从这里找到示例：https ://codesandbox.io/s/7k82j5j1qx

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

希望这些对您有所帮助。

推荐阅读