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

Question

我正在尝试更改材质 ui 中的默认断点

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

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

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

我的组件是这样渲染的：

<Box display={{ xs: 'none',sm:"block"}}>
  <Row direction={"row-reverse"} divider={true} />
</Box>

我希望当屏幕宽度小于 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)`
  }
});

现场示例