Перезаписывающие компоненты Material-UI Стили точек останова желоба TypeError: Невозможно прочитать «точки останова» свойства undefined - PullRequest
Новая
       3

Перезаписывающие компоненты Material-UI Стили точек останова желоба TypeError: Невозможно прочитать «точки останова» свойства undefined

0 голосов
/ 18 марта 2019

Я делаю что-то вроде этого. 

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

Большое спасибо.

1 Ответ

2 голосов
/ 18 марта 2019

Поскольку ответил в этом вопросе , вам нужно создать экземпляр темы по умолчанию, чтобы у вас был объект для получения точек останова: 

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