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。

我想获取主题样式值并用于覆盖，如何解决此错误。
对于所有主题样式/组件（例如paper）来说，24像素装订线对我来说太多了，我如何用16像素替换轻松覆盖所有装订线？

非常感谢。

Answer 1

与answered in this question一样，您需要创建默认主题的实例，因此您有一个对象可从以下对象获取断点：

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 uses theme.mixins.gutters()来获取默认装订线，因此我认为您必须重写它。查看this function source，这应该是将装订线设置为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;

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

1 个答案: