Question

我正在尝试为MuiTab提供CSS替代，以增加字体大小。

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

theme.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函数覆盖此媒体查询吗？我没有断点，所以也许我还需要指定断点，以便能够在替代中使用它们。

亲切的问候

Answer 1

我通过以下方式对其进行了解决：

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

Answer 2

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

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

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

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

将以上样式应用于TabLabel

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

这有效。检出Demo Sandbox here

Answer 3

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

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

Answer 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

覆盖使用媒体查询的MuiTab等组件

4 个答案: