Как переопределить @media css для компонента реакции с материалом-интерфейсом

Question

В этот вопрос Я спросил, как переопределить свойство css компонента material-ui, и предоставил хороший пример. Однако, пытаясь установить высоту компонента панели инструментов, я обнаружил, что не могу переопределить CSS из-за чрезмерной спецификации @media. Моим подходом была следующая спецификация MuiTheme:

const theme = createMuiTheme({
    overrides: {
        MuiToolbar: {
            regular: {
               height: "32px",
               minHeight: "32px"
        }
    },
  }
});

Вот изображение перезаписи css:

Если я введу хак и добавлю! Важный для minHeight, он будет работать. Кодовое окно, показывающее это здесь: https://codesandbox.io/s/4xmr2j2ny9

Как правильно переопределить спецификацию @media, используя MuiTheme?

Answer 1

MuiThemeProvider не является обязательным для v1.x material-ui , и мы используем компонент более высокого порядка, созданный withStyles, для вставки массива стилей в DOM как CSS, Вот рабочий пример без изменения аннотации @media:

https://codesandbox.io/s/7klzx84z71

Answer 2

Вы должны добавить его, как показано ниже. Оператор медиазапроса должен быть заключен в одинарные кавычки.

 MuiToolbar: {
      regular: {
        backgroundColor: "#ffff00",
        color: "#000000",
        height: "32px",
        minHeight: "32px",
        '@media (min-width: 600px)': {
          minHeight: "48px"
        }
      },

Пожалуйста, найдите коды и окс - https://codesandbox.io/s/q8joyrrrwj