小编Ben*_*nit的帖子

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

我正在尝试为 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;
Run Code Online (Sandbox Code Playgroud)

这会生成以下应用于 MuiTab 的 css 规则:

muitab 覆盖示例

该规则由以下文件生成:

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),
},
Run Code Online (Sandbox Code Playgroud)

有没有人有如何使用 createMuiTheme 函数覆盖此媒体查询的示例?我没有断点,所以也许我还需要指定断点才能在我的覆盖中使用它们

亲切的问候

css material-ui

10
推荐指数
3
解决办法
4958
查看次数

标签 统计

css ×1

material-ui ×1