如何为Material-UI React组件覆盖@media CSS [英] How to over-ride an @media css for a material-ui react component

问题描述

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

In this question I asked how to override a css property of a material-ui component and was provided a nice example. However, when trying to set the height of the Toolbar component I found I could not override the css due to an over arching @media specification. The following MuiTheme spec was my approach:

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

以下是CSS被覆盖的视觉效果:

Here is a visual of the css being over-ridden:

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

If I introduce a hack and add !important to the minHeight it works. A codesandbox showing this is here: https://codesandbox.io/s/4xmr2j2ny9

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

What is the proper way to overide an @media spec using MuiTheme?

推荐答案

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

You have to add it like below. The media query statement should be enclosed in single quotes.

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

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

Please find the codesandox - https://codesandbox.io/s/q8joyrrrwj

这篇关于如何为Material-UI React组件覆盖@media CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！