Was the createBreakpoints method removed in Material version 5?

Question

I try to use createBreakpoints method:

import createBreakpoints from '@material-ui/core/styles/createBreakpoints'
import { createTheme } from '@material-ui/core'

const breakpoints = createBreakpoints({})

const theme = createTheme({
  overrides: {
    MuiTab: {
      root: {
        [breakpoints.up('md')]: {
          minWidth: '200px',
          backgroundColor: 'yellow',
        },
      },
    },
  },
})

export default theme

It shows an error: Module not found: Can't resolve '@material-ui/core/styles/createBreakpoints'

I want to create a breakpoint rule in the createTheme method. How can I do that?

The issue is on Version 5.

Thanks.

Answer 1

As mentioned here and here createBreakpoints is a private module, instead you must use createTheme and styleOverrides:

import { createTheme } from '@material-ui/core/styles';

const theme = createTheme();

theme.components.MuiTab = {
  styleOverrides: {
    root: {
      [theme.breakpoints.up('md')]: {
        minWidth: '200px',
        backgroundColor: 'yellow',
      },
    },
  },
};

example:

Answer 2

It's a private method and no longer a recommended approach to styling with mui V5 (material-ui). However, if you are in the process of migrating it can be to use it and can be found under @mui/system.

import { createTheme, adaptV4Theme} from "@mui/material/styles";
import createBreakpoints from "@mui/system/createTheme/createBreakpoints";

const breakpoints = createBreakpoints({
  xs: 0,
  sm: 600,
  md: 960,
  lg: 1280,
  xl: 1920,
});

Note : The breakpoints have changed with V5. A migration work around is directly set them.

const theme createTheme(adaptV4Theme({
    breakpoints: {
      values: {
        xs: 0,
        sm: 600,
        md: 960,
        lg: 1280,
        xl: 1920,
      },
    },
    ... v4 theme goes here,
})