如何更改 MUI 主题中的响应断点值？答案

【问题标题】：How to change responsive breakpoint values in MUI theme?如何更改 MUI 主题中的响应断点值？
【发布时间】：2018-02-28 17:33:13
【问题描述】：

我正在使用 MUI 的 v1 测试版。媒体查询断点与我使用的 Bootstrap v4 断点不同，我想覆盖 MUI 断点的值以匹配 Bootstrap 的断点。

我需要执行以下操作，但找不到足够的文档来使其正常工作。

当前错误是：

"Uncaught TypeError: Object(...) is not a function" 尝试引用 createBreakpoints() 作为函数。

import { MuiThemeProvider, createMuiTheme, createBreakpoints } from "material-ui/styles";
    
const breakpointValues = {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
};

const breakpoints = createBreakpoints({ values: breakpointValues });
const theme = createMuiTheme({ breakpoints });

<MuiThemeProvider theme={theme}>
  <App />
</MuiThemeProvider>

【问题讨论】：

标签： reactjs material-ui breakpoints

【解决方案1】：

哦，我想通了。需要将我的新值传递给内部调用 createBreakpoints 函数的 createMuiTheme 函数。

const breakpointValues = {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
};
const theme = createMuiTheme({ breakpoints: { values: breakpointValues } });

【讨论】：

【解决方案2】：

MUI v5 更新

在创建自定义断点之前，请先查看默认断点值here，看看它们是否适合您的需要。如果您仍然决定创建自己的价值观：

const theme = createTheme({
  breakpoints: {
    values: {
      mobile: 0,
      tablet: 640,
      laptop: 1024,
      desktop: 1200,
    },
  },
});

上面的代码将丢弃默认主题中的所有断点值。如果您希望包含原始值，请创建一个 defaultTheme 并像这样合并这些值：

const defaultTheme = createTheme();
const theme = createTheme({
  breakpoints: {
    values: {
      ...defaultTheme.breakpoints.values,
      mobile: 0,
      tablet: 640,
      laptop: 1024,
      desktop: 1200,
    },
  },
});

对于 Typescript 用户，您还需要更新自定义断点名称：

declare module '@mui/material/styles' {
  interface BreakpointOverrides {
    mobile: true; // adds the `mobile` breakpoint
    tablet: true;
    laptop: true;
    desktop: true;
  }
}

用法

<ThemeProvider theme={theme}>
  <Content />
</ThemeProvider>

参考

https://mui.com/customization/breakpoints/#custom-breakpoints

【讨论】：