css - 如何为 material-ui 反应组件覆盖 @media css

Question

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

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

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

如果我介绍一个 hack 并将 !important 添加到 minHeight ，它就可以工作。显示此内容的代码框在这里：https ://codesandbox.io/s/4xmr2j2ny9

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

标签： cssreactjsmaterial-ui

Answer 1

您必须像下面这样添加它。媒体查询语句应该用单引号引起来。

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

请找到codesandox - https://codesandbox.io/s/q8joyrrrwj