增强 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，我会发现禁用的是：

灰色字体
底线是虚线

所以，我想对 react-select 进行一次相同的行为。

在不手动自定义样式的情况下，我看到只需在正确的 div 上添加 Mui-disabled CSS class 就可以使用浏览器检查器。

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

处注入这个 class 的方法

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

通过复制粘贴文档中的代码，问题的核心似乎在这个片段中：


  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-disabledclass两次尝试都失败了。它们被添加到正确节点的直接容器和直接子节点中。

查看 https://github.com/mui-org/material-ui/blob/60071b8b6d4406af3c0a7a332ff86ca02cffa32d/packages/material-ui/src/FormControl/FormControl.js#L149 处的 FormControl 代码（呈现 div 的组件我需要修改）我看不出这样做的办法。

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

Answer 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
/>

或稍微改变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}
    />
  );
}

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

Enhance layout integration of react-select into material-ui

reactjs

react-select

material-ui