小编yos*_*tor的帖子

Material ui 主题中的断点不会更改排版的字体大小

我有一个自定义材料 ui 主题,我尝试在本示例 h5 中的版式中添加断点,以便当屏幕低于定义的最大宽度时字体大小较小。媒体查询甚至没有显示在检查器中。由于某种原因它没有被应用。这是代码的相关部分。

const breakpoints = {
  values: {
    xs: 0,
      sm: 0, // Phone
      md: 768, // Tablet/Laptop
      lg: 1500, // Desktop
      xl: 2000
  }
}

function myTheme (theme) {
  const mergedTheme = createMuiTheme({
    ...theme,
    breakpoints: breakpoints, 

    typography: {
      ...theme.typography,
      fontFamily: openSans,
      fontSize: 15,
      h5: {
        fontFamily: openSans,
        fontSize: '1.5625rem', // 25px
        [`& @media screen (max-width: ${breakpoints.values.lg}px)`]: {
          fontSize: '0.06785', //11px
        }
      } 
    }
  // I have also tried just returning 
  // the mergedTheme and not used …
Run Code Online (Sandbox Code Playgroud)

reactjs material-ui jss

1
推荐指数
1
解决办法
4914
查看次数

标签 统计

jss ×1

material-ui ×1

reactjs ×1