Was the createBreakpoints method removed in Material version 5?

user_9207294 0
Viewed 1541

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.

material-ui
2 Answers

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:

Edit flamboyant-rgb-hjvui

user_111297510

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,
})
user_62072660
Related