Переопределение стилей Material-UI через настройку темы 'overrides', стиль NotchedOutline - PullRequest
Новая
       14

Переопределение стилей Material-UI через настройку темы 'overrides', стиль NotchedOutline

1 голос
/ 25 октября 2019

У меня есть репродукция Code Sandbox здесь .

Обычно TextField, который является удобной оберткой нескольких других компонентов, имеет цвет границы как простой серый, ицвет при наведении theme.palette.primary.main.

Я хочу изменить это, чтобы сделать цвета наведения и не наведения одинаковыми.

Я пробовал это с конфигурацией переопределений: 

const themeOptions = {
  palette: {
    primary: {
      main: "#FF5555"
    },
    text: {
      primary: "#5555FF"
    }
  },
  overrides: {
    MuiOutlinedInput: {
      root: {
        borderColor: "#55FF55",
        "&:hover": {
          borderColor: "#55FF55"
        }
      },
      notchedOutline: {
        borderColor: "#55FF55",
        "&:hover": {
          borderColor: "#55FF55"
        }
      }
    }
  }
};

У меня проблема в том, что класс, который применяется к fieldset, который в конечном итоге получает стиль:

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline

Как изменить это правило с помощью конфигурации переопределений?

То есть я могу переопределить либо MuiOutlinedInput-root:hover, либо .MuiOutlinedInput-notchedOutline хорошо, но как мне переопределить его для комбинации?

1 Ответ

2 голосов
/ 25 октября 2019

В свойстве notchedOutline в разделе overrides вы можете удалить свойство "&: hover" и добавить notchedOutline в разделе корневого наведения, например: 

overrides: {
  MuiOutlinedInput: {
    root: {
      borderColor: "#55FF55",
      "&:hover $notchedOutline": {
        borderColor: "#55FF55"
      }
    },
    notchedOutline: {
      borderColor: "#55FF55"
    }
  }
}

Этоспособ наведения и корневой цвет по умолчанию будет одинаковым.

...