Улучшенная интеграция компоновки реакции-выбора в материал-интерфейс

Question

Я использую новый материал-ui 4.0 (.1) и хочу продвинуть вперед интеграцию act-select, задокументированную в официальных документах .

Чего не хватает, так этоподдержка пользовательского интерфейса для отключенного состояния (isDisabled prop from реагировать на выбор).Состояние отключения работает, но для него нет хорошей интеграции в стиле Materialui.

Если я смотрю на классический компонент выбора , я вижу, что отключенный компонент:

• серый шрифт
• нижняя строка пунктирная

Итак, я хочу иметьодно и то же поведение для реакции-выбора один раз.

Без ручной настройки стилей я вижу, что простое добавление Mui-disabled CSS-класса в соответствующий div делает свое дело с помощью инспектора браузера.

Так что это, вероятно, лучший путь, поэтому я автоматически наследую отключенный стиль, ноЯ не могу найти способ внедрить этот класс в этот 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-disabled здесьтолько для текстовых целей).

К несчастью, попытка обоих классов Mui-disabled не удалась.Они добавляются в прямой контейнер и прямые дочерние элементы соответствующего узла.

Глядя на код FormControl в https://github.com/mui-org/material-ui/blob/60071b8b6d4406af3c0a7a332ff86ca02cffa32d/packages/material-ui/src/FormControl/FormControl.js#L149 (компонент, который рендерит 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
/>

2. Или слегка изменить 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}
    />
  );
}