时间戳

首页 > 解决方案 > 如何应用自定义断点（Material UI）？

javascript - 如何应用自定义断点（Material UI）？

问题描述

我已经从这个问题中获取了用于创建断点的参考，并且在我的应用程序中我使用了 GridList。我根据屏幕宽度给出列数。

确定列数的代码：

function getCols(screenWidth) {
   
    if (isWidthUp('xl', screenWidth)) {
      return 5;
    }

    if (isWidthUp('lg', screenWidth)) {
      return 4;
    }

    return 4;
  }

断点和其他自定义样式的代码：

const BREAKPOINTS = {
  xs: 0,
  sm: 600,
  md: 960,
  lg: 1024,
  xl: 1280
};

const breakpointsValues = {
  breakpoints: {
    values: BREAKPOINTS
  }
};

const theme =  createMuiTheme({
  palette,
  overrides,
  typography: {
    "fontFamily": `Montserrat`,
    "fontSize": 14,
    "fontWeightLight": 350,
    "fontWeightRegular": 450,
    "fontWeightMedium": 550
   },
   ...breakpointsValues
});

问题是当我检查和使用设备工具栏时，每当我更改宽度时，屏幕尺寸都会得到正确控制，但是当我将分辨率从设备设置更改为 1024*768 或任何其他分辨率时，每次屏幕宽度打印为“ xl”。

我查找了文档和论坛，但找不到任何解决方案

标签： javascriptreactjsmaterial-ui

解决方案

推荐阅读