如何为Material-UI React组件覆盖@media CSS

Question

在this question中，我询问了如何覆盖material-ui组件的css属性，并提供了一个很好的示例。但是，当尝试设置工具栏组件的高度时，我发现由于过度的@media规范，我无法覆盖CSS。以下是我的MuiTheme规范：

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

这是CSS被覆盖的视觉效果：

如果我引入了hack，并在minHeight中添加！important，它将起作用。显示代码的代码框位于此处：https://codesandbox.io/s/4xmr2j2ny9

使用MuiTheme覆盖@media规范的正确方法是什么？

Answer 1

您必须按如下所示添加它。媒体查询语句应用单引号引起来。

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

请找到验证码-https://codesandbox.io/s/q8joyrrrwj

Answer 2

MuiThemeProvider 对于v1.x material-ui 是可选的，我们使用withStyles创建的高阶组件将样式数组作为CSS注入DOM中， 这是不更改@media批注的工作示例：

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