如何超越材质ui组件的@media css

在中，我询问了如何覆盖材质ui组件的css属性，并得到了一个很好的示例。然而，当我试图设置工具栏组件的高度时，我发现我无法覆盖css，因为有一个超拱形@media规范。以下是我的方法：

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

以下是css被过度使用的视觉效果：

如果我介绍一个黑客和添加！重要的是它的工作高度。此处显示了一个代码沙盒：

---

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

您必须像下面那样添加它。媒体查询语句应包含在单引号中

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

---

请查找代码Sandox-

MuiThemeProvider对于v1.x材质ui是可选的，我们使用由withStyles创建的高阶组件将样式数组作为CSS注入DOM， 以下是不更改@media annotation的工作示例：

---

通常CSS考虑CSS的最后更新。例如，如果第5行有一个css，第10行有另一个css，但都是相同的元素和相同的属性。然后CSS考虑第第十行是有效的。这就是你的css被过度使用的原因。正确地排列代码，就像媒体查询一样，将最大的设备放在顶部，然后是较小的设备。不过，这不是一个常规css文件，而是material-ui.com组件的主题覆盖。我的问题涉及如何使用工具栏组件的主题覆盖功能指定（如果可能的话）替换@media。这很好！但是，您的代码沙盒链接指向不同的解决方案。请更新或删除您的sandbox链接，我会将此标记为答案。抱歉，Glenn，我更新了相同的代码sandbox以回答另一个问题。我用所需的解决方案创建了一个新的CodeSandbox。这个解决方案的缺点是我们需要知道需要覆盖哪个媒体查询。如果组件的内部代码更改，则主题替代将失去其效果。这可以用类似于

[defaultTheme.breakpoints.up（'md'）]的方法解决：{

而不是

'@media（最小宽度：600px）：{

这在执行单个元素时有效，但我希望它应用于工具栏的所有实例，而不必将其编码到使用它的每个组件中。Vijay的解决方案允许它应用于全局主题级别，这正是我所寻找的。是的，在这种情况下，Vijay方法是可行的。我支持这一点。实际上，我的解决方案是如果是这样的话，你可以单独定制你的工具栏。但是在你的情况下，你希望在所有的工具栏上都应用合理的样式。总之，做得好。）