覆盖使用媒体查询的MuiTab等组件 [英] Override components like MuiTab that use media queries

问题描述

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

使用有关Material-UI上CSS覆盖的文档，我设法增加了大多数元素的字体大小，但是我在使用媒体查询的元素上遇到了麻烦，因为它们会产生比我在覆盖中提供的规则更具体的CSS规则。

heme.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函数覆盖此媒体查询的示例？我没有断点，因此可能还需要指定断点才能在我的重写中使用它们

致以亲切问候

推荐答案

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

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

这篇关于覆盖使用媒体查询的MuiTab等组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！