How can I use breakpoints inside createMuiTheme? Material UI & React.js

You can use the createBreakpoints method


// theme.js

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

const breakpoints = createBreakpoints({})

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

export default theme

(tested: material-ui 4.0.1)

V5 update

Preferred solution is to create an intermediate theme (source):

let theme = createTheme()
theme = createTheme(theme , { 
  h5: {
          fontSize: "1.5", //24px
          fontWeight: title.fontWeight,
          fontFamily: sansSerif(title.fontFamily),
          letterSpacing: title.letterSpacing,
          lineHeight: "2.1rem", //34px
          color: "#636e72",
          [theme.breakpoints.between("xs", "sm")]: {
            fontSize: "1.25rem", // 20px
            lineHeight: "1.9rem", //  30px
          [theme.breakpoints.between("sm", "md")]: {
            fontSize: "1.4rem", //24px
            lineHeight: "2rem", // 35px

If you used createBreakpoints: as pointed out by @Ricardo Canelas comment, createBreakpoints has simply moved, right import is now: import createBreakpoints from "@mui/system/createTheme/createBreakpoints". However, keep in mind that this is still a private API at the time of writing so can move/break at any version update. Preferred solution is to use an intermediate theme.