Reactjs 增强react select在物料ui中的布局集成

我正在使用新的材质UI4.0（.1），我想推进

缺少的是对禁用状态的用户界面支持（

isDisabled

prop from react select）。禁用状态可以工作，但是没有很好的materialui风格的集成

如果我看一个，我看到一个残疾的是：

• 灰色字体
• 底线是虚线

所以，我想让react select具有相同的行为

在没有手动定制样式的情况下，我发现只需在适当的div上添加

Mui disabled

CSS类，就可以使用浏览器检查器完成任务

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

这是可能的，还是手动重新应用样式更好

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

  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已禁用

此处仅用于文本目的）

不幸的是，两个

Mui-disabled

类的尝试都失败了。它们被添加到正确节点的直接容器和直接子级

查看FormControl的代码（呈现

div的组件

我需要修改），我看不出有什么办法可以做到这一点

---

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

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

为

TextFieldProps

提供

disabled:true

：

---

哇！伟大的我要二号。与此同时，我正在测试另一种解决方法，即通过

className:isDisabled？“禁用Mui”：未定义的

到InputPropsprop，但这要干净得多。谢谢

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

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}
    />
  );
}