覆盖像 MuiTab 这样使用媒体查询的组件答案

【问题标题】：Override components like MuiTab that use media queries覆盖像 MuiTab 这样使用媒体查询的组件
【发布时间】：2019-01-02 07:02:42
【问题描述】：

我正在尝试为 MuiTab 提供 CSS 覆盖以增加字体大小。

使用关于 material-ui 上的 CSS 覆盖的文档，我设法增加了大多数元素的字体大小，但是我遇到了使用媒体查询的元素，因为它们产生的 CSS 规则比我提供的覆盖规则更具体.

主题.ts：

import { createMuiTheme } from '@material-ui/core';

const fontSizeStyle = {
  fontSize: '1rem',
};

const fontFamilyStyle = {
  fontFamily: '"Ubuntu", sans-serif'
};

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        ...fontFamilyStyle,
        ...fontSizeStyle,
      },
      label: fontSizeStyle,
    },
  }
});

export default theme;

这会产生以下应用于 MuiTab 的 css 规则：

规则由以下文件生成：

https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tab/Tab.js

[theme.breakpoints.up('md')]: {
  fontSize: theme.typography.pxToRem(13),
},

有没有人举例说明如何使用 createMuiTheme 函数覆盖这个媒体查询？我没有断点，所以也许我还需要指定断点才能在我的覆盖中使用它们

亲切的问候

【问题讨论】：

标签： css material-ui

【解决方案1】：

我也遇到了同样的问题。我阅读了有关Breakpoints 的文档并找到了解决这种情况的方法，但我发现它有点难看，因为我必须使用classes 属性在每个Tab 中应用被覆盖的样式。

注意：我不知道使用createMuiTheme函数解决这个问题的方法

将样式应用于breakpoints 样式。在这种情况下，

const styles = theme => ({
  mediaFont:{
    [theme.breakpoints.up('md')]: {
     fontSize:fontSizeStyle.fontSize,
    },
  },
  });

将上述样式应用到TabLabel

<Tab label="Item One" classes={{label:classes.mediaFont}} />

【讨论】：

【解决方案2】：

CSS 有一种机制可以强制一个不太具体的规则覆盖一个更具体的规则：!important。

const fontSizeStyle = {
  fontSize: '1rem !important',
};

【讨论】：

!important not 不是你糟糕的 CSS 的解决方案！
不要使用第三方 CSS，然后按照您的标准手工制作。或者，当您尝试将规则指定为比框架自动生成的规则更重要时，只需使用重要。另外，如果你要批评，你应该提供一个更好的解决方案，而不仅仅是开车兜风。

【解决方案3】：

我通过以下方式指定它来解决它：

    MuiTab: {
      root: {
        minWidth: 0,
        '@media (min-width: 0px)': {
          minWidth: 0
        }
      }
    }

【讨论】：

【解决方案4】：

如下指定

let theme = createMuiTheme({});

theme = {
  ...theme,
  overrides: {
    MuiTab: {
      root: {
        [theme.breakpoints.up("xs")]: {
          minHeight: 10
        }
      }
    }
  }
}

export default theme;

theme.breakpoints 公开了四个帮助方法来创建 CSS 媒体查询：

theme.breakpoints.up(key)
theme.breakpoints.down(key)
theme.breakpoints.only(key)
theme.breakpoints.between(start, end)

每个key 都是一个断点，并与固定的屏幕宽度匹配。允许的键值为xs|sm|md|lg|xl

更多信息请见material-ui docs

【讨论】：