How to change responsive breakpoint values in MUI theme?

Question

I'm using the v1 beta of MUI. The media query breakpoints are not the same as Bootstrap v4 breakpoints I'm using and I wanted to override the values of the MUI breakpoints to match that of Bootstraps.

I need to do something like below but I'm not finding enough documentation to get it to work.

Current error is:

"Uncaught TypeError: Object(...) is not a function" when trying to reference createBreakpoints() as a function.

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>

Answer 1

Oh, I figured out out. Needed to pass my new values to the createMuiTheme func which internally calls createBreakpoints func.

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

Answer 2

MUI v5 Update

Before you create custom breakpoints, have a look at the default breakpoint values here first to see if they suit your need. If you still decide to create your own values:

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

The code above will discard all breakpoint values from the default theme. If you wish to include the original values, create a defaultTheme and merge those values like this:

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

For Typescript users, you also need to update your custom breakpoint names:

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

Usage

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

Reference

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