Как переопределить стили цвета глобальной границы для отключенного пользовательского интерфейса TextField?

Question

Я пытаюсь переопределить глобальный стиль для отключенных компонентов Mui TextField, но не могу изменить цвет границы.

Мне удалось изменить цвет метки, если поле отключено, но не цвет границы. Вот что у меня получилось:

export const theme = createMuiTheme({
  overrides: {
    // For label
    MuiInputLabel: {
      root: {
        '&$disabled': {
          color: '#000000',
        },
      },
    },
    // For border color of field (doesn't work)
    MuiTextField: {
      root: {
        '&$disabled': {
          borderColor: '#FFFFFF'
        },
      },
    },
  },
});

Я пробовал все варианты, в том числе

    MuiOutlinedInput: {
      root: {
        fieldset: {
          borderColor: '#FFFFFF',
        },
      }
    }

Но это только меняет цвет границы полей, не отключенных. Что я здесь не так делаю? Вот как это выглядит:

Answer 1

Граница получается из элемента fieldset. Вы можете стилизовать, основываясь на ваших потребностях:

MuiInputBase: {
  root: {
    "&$disabled": {
      '& fieldset.MuiOutlinedInput-notchedOutline': {
        borderColor: "blue",
        background: "grey"
      }
    }
  }
}

Рабочий пример можно найти здесь: https://codesandbox.io/s/material-styling-disabled-textfield-ckp14?file= / demo. js

Вот "пошаговое руководство", как сделать это самостоятельно:

1. Проверьте вывод html:
2. Откройте изображение в новой вкладке, чтобы проверить marks.
   Как вы можете видеть - метка на самом деле не является родителем тега fieldset, который является dr aws границей.
3. Набор полей находится внутри div.MuiInputBase, который также отключен, поэтому мне пришлось добавить &$disabled на root MuiInputBase.
4. Что касается & fieldset - элемент fieldset является дочерним элементом для MuiInputBase - поэтому пробел между & и именем тега означает, что это дочерний элемент.
5. Элемент fieldset имеет MuiOutlinedInput-notchedOutline, поэтому я использовал его как соответствующий селектор. Возможно, вы могли бы просто использовать .MuiOutlinedInput-root.Mui-disabled fieldset без последнего выбора. Попробуйте: -).