Material-ui overwrite components gutter breakpoint styles TypeError: Cannot read property 'breakpoints' of undefined

Question

I am doing something like this.

// theme.js

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

const theme = createMuiTheme({
  overrides: {
    MuiToolbar: {
      gutters: {
        [theme.breakpoints.up('sm')]: {
          paddingLeft: '16px',
          paddingRight: '16px',
        },
      },
    },
  },
  palette: {
    type: 'dark',
  },
});

export default theme;

Error message: TypeError: Cannot read property 'breakpoints' of undefined.

1. I wanna get the theme style value and use for overwrite, how can i fixed this error.

2. 24px gutter is too much for me for all theme style / components like paper, how can i easy to overwrite all gutter with 16px replace?

Thanks so much.

Answer 1

As answered in this question, you need to create an instance of the default theme, so you have an object to get breakpoints from:

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

const defaultTheme = createMuiTheme();

const theme = createMuiTheme({
  overrides: {
    MuiToolbar: {
      gutters: {
        [defaultTheme.breakpoints.up('sm')]: {
          paddingLeft: '16px',
          paddingRight: '16px',
        },
      },
    },
  },
  palette: {
    type: 'dark',
  },
});

export default theme;

Regarding the "global" gutter property, Toolbar uses theme.mixins.gutters() to get the default gutter, so I think you have to override that. Looking into this function source, this should be the right override to set the gutter to 16px:

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

const defaultTheme = createMuiTheme();

const theme = createMuiTheme({
  mixins: {
    gutters: (styles = {}) => ({
      paddingLeft: defaultTheme.spacing.unit * 2,
      paddingRight: defaultTheme.spacing.unit * 2,
      ...styles,
      [defaultTheme.breakpoints.up('sm')]: {
        paddingLeft: defaultTheme.spacing.unit * 2,
        paddingRight: defaultTheme.spacing.unit * 2,
        ...styles[defaultTheme.breakpoints.up('sm')],
      },
    }),
  },
  palette: {
    type: 'dark',
  },
});

export default theme;