Улучшить интеграцию макета react-select в material-ui

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

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

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

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

Улучшить интеграцию макета react-select в material-ui

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

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

Улучшить интеграцию макета react-select в material-ui

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

Улучшить интеграцию макета react-select в material-ui

Глядя на код FormControl в https://github.com/mui-org/material-ui/blob/60071b8b6d4406af3c0a7a332ff86ca02cffa32d/packages/material-ui/src/FormControl/FormControl.js#L149 (компонент, который отображает div, который мне нужно изменить), я не вижу способа сделать это.

Пожалуйста, обрати внимание Я прекрасно понимаю, что просто настроить стиль на порядок проще, но я все еще изучаю здесь весь фреймворк.

reactjs material-ui react-select

31.05.2019 17:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

910

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 = {handleChangeEventMulti}
    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}
    />
  );
}

Ух ты! Отлично... Я выберу номер два. Тем временем я тестировал другой обходной путь, который заключался в передаче className: isDisabled ? 'Mui-disabled' : undefined в InputProps prop, но это много чище. Спасибо!

— 31.05.2019 17:37

31.05.2019 17:31