更改材质ui中的默认断点不起作用

Question

我正在尝试将材料ui中的默认断点更改为

from django.shortcuts import render
...
return render(request, 'yourTemplate.html', {'isfav': isfav})

例如，我将sm的值从600px更改为426px

\node_modules\@material-ui\system\breakpoints.js

我的组件的渲染方式如下：

var values = {
  xs: 0,
  sm: 426,
  md: 960,
  lg: 1280,
  xl: 1920
};

我希望当屏幕宽度小于426px时使用我说的代码隐藏Box组件，但是当宽度小于600px（这是sm断点的默认值）时，它将隐藏该组件，因此我输入的值被主题提供程序忽略

Answer 1

请确保按照Material-UI docs

所述将断点值传递给主题选项

const values = {
  xs: 0,
  sm: 426,
  md: 960,
  lg: 1280,
  xl: 1920
};

const theme = createMuiTheme({
  breakpoints: {
    keys: ["xs", "sm", "md", "lg", "xl"],
    up: (key) => `@media (min-width:${values[key]}px)`
  }
});

实时示例