Enhance layout integration of react-select into material-ui

Question

I'm using the new material-ui 4.0(.1) and I want to push forward the react-select integration documented in the official docs.

What is missing is a user interface support for the disabled status (isDisabled prop from react-select). The disable status works, but there's no good materialui style integration for it.

If I look at a classic select component I see that a disabled one is:

grayed font
bottom line is dotted

So, I want to have the same behavior for the react-select once.

Without manually customizing the styles, I see that simply adding the Mui-disabled CSS class on the proper div does the trick using the browser inspector.

So this is probably the best way to go, so I automatically inherith the disabled style, but I cannot find a way to inject this class at that div.

Is this possible someway or it's better for me to just manually re-apply the style?

By copy-pasting the code from the documentation seems that the core of the issue is in this snippet:


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

(hard-coded Mui-disabledhere is just for text purpose).

Unluckily both Mui-disabled classes attempt fails. They are added to the direct container and direct children of the proper node.

Looking at the code of FormControl at https://github.com/mui-org/material-ui/blob/60071b8b6d4406af3c0a7a332ff86ca02cffa32d/packages/material-ui/src/FormControl/FormControl.js#L149 (the component that's render the div I need to modify) I see no way of doing this.

Please note I'm perfectly aware that simply customizing the style is an order of magnitude simpler, but I'm still learning the whole framework here.

Andrii Golubenko Andrii Golubenko · Accepted Answer · 2019-05-31T15:31:57

You could do one of two things:

Provide disabled: true to 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
/>

Or slightly change Control component:

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

Enhance layout integration of react-select into material-ui

1 Answers