增强 react-select 到 material-ui 的布局集成

Question

我正在使用新的material-ui 4.0(.1)，我想推进react-select integration documented in the official docs。

缺少的是对禁用状态的用户界面支持（来自 react-select 的isDisabled prop）。禁用状态有效，但没有很好的 materialui 样式集成。

如果我查看classic select component，我会看到残疾人是：

• 灰色字体
• 底线是虚线

所以，我希望一次反应选择具有相同的行为。

无需手动自定义样式，我发现只需在适当的 div 上添加 Mui-disabled CSS 类即可使用浏览器检查器解决问题。

所以这可能是最好的方法，所以我自动继承了禁用的样式，但我找不到在那个 div 中注入这个类的方法。

这是否可能，或者我最好手动重新应用样式？

通过复制粘贴文档中的代码，问题的核心似乎在于这个 sn-p：

  return (
    <TextField
      fullWidth
      className="Mui-disabled"
      InputProps={{
        inputComponent,
        inputProps: {
          className: clsx(props.selectProps.classes.input, {
            'Mui-disabled': true,
          }),
          inputRef: props.innerRef,
          children: props.children,
          ...props.innerProps,
        },
      }}
      {...props.selectProps.TextFieldProps}
    />
  );

（硬编码Mui-disabled这里仅用于文本目的）。

不幸的是，Mui-disabled 类的尝试都失败了。它们被添加到正确节点的直接容器和直接子节点中。

查看 https://github.com/mui-org/material-ui/blob/60071b8b6d4406af3c0a7a332ff86ca02cffa32d/packages/material-ui/src/FormControl/FormControl.js#L149 的 FormControl 代码（渲染 div 的组件我需要修改）我看不出有什么办法。

请注意我非常清楚，简单地自定义样式要简单一个数量级，但我仍然在这里学习整个框架。

Answer 1

你可以做以下两件事之一：

1. 提供disabled: true到TextFieldProps：

<Select
    classes={classes}
    styles={selectStyles}
    isDisabled={true}
    TextFieldProps={{
        label: 'Label',
        disabled: true, //<---- add this row
        InputLabelProps: {
            shrink: true,
        },
    }}
    options={suggestions}
    components={components}
    value={multi}
    onChange={handleChangeMulti}
    placeholder="Select multiple countries"
    isMulti
/>

1. 或者稍微改一下Control组件：

function Control(props) {
  return (
    <TextField
      fullWidth
      InputProps={{
        inputComponent,
        inputProps: {
          className: props.selectProps.classes.input,
          inputRef: props.innerRef,
          children: props.children,
          ...props.innerProps,
        },
      }}
      disabled={props.isDisabled} //<---- add this row
      {...props.selectProps.TextFieldProps}
    />
  );
}