Material-ui 覆盖组件装订线断点样式 TypeError：无法读取未定义的属性“断点”

Question

我正在做这样的事情。

// 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;

错误信息：TypeError: Cannot read property 'breakpoints' of undefined。

1. 我想获取主题样式值并用于覆盖，如何修复此错误。

2. 对于所有主题样式/组件来说，24px 装订线对我来说太多了paper，我怎样才能轻松地用 16px 替换覆盖所有装订线？

非常感谢。

Answer 1

正如这个问题所回答的，您需要创建默认主题的实例，这样您就有一个可以从中获取断点的对象：

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;

关于“全局”装订线属性，Toolbar 用于 theme.mixins.gutters()获取默认装订线，所以我认为您必须覆盖它。查看此函数源代码，这应该是将装订线设置为 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;