如何根据 React 材料 UI 中的媒体查询更改全局字体大小

Question

我正在尝试更改fontSize（根据文档默认为 14）。如果我的显示器是全高清的（即：1920*1080 或"@media屏幕和（最大宽度：1900px）"），我想让它变成 18。所以我相信这将改变基于此排版全局fontSize的"rem"中的其他所有排版字体。

我什至尝试在我的主题Overide js中应用媒体查询。

const themeOverrides = {
  typography: {
    fontFamily: 'Ubuntu, sans-serif',
    '@media screen and (max-width: 1600px)': {
      fontSize: 16
    },
    '@media screen and (max-width: 1900px)': {
      fontSize: 18
    }
  },
}

但它没有按照条件工作。

Answer 1

实际上你的代码是正确的，但你应该把它放在一个大括号对里：

const themeOverrides = {
  typography: {
    fontFamily: 'Ubuntu, sans-serif',
    ['@media screen and (max-width: 1600px)']: {
      fontSize: 16,
    },
    ['@media screen and (max-width: 1900px)']: {
      fontSize: 18,
    },
  },
};