React & Material-UI: тема не определена в createStyles () с использованием TypeScript

Question

Я изучаю React с использованием TypeScript и использую инфраструктуру пользовательского интерфейса Material для внешнего интерфейса.Я пытаюсь заставить работать медиазапросы, но я получил ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'up' из неопределенных стилей (webpack-internal: ///./app/components/navigation/Toolbar/index.tsx:59)

Это соответствующий код:

const styles = ({breakpoints}: Theme) => createStyles( {
    grow: {
        flexGrow: 1
    },
    menuButton: {
        marginLeft: -12,
        marginRight: 20
    },
    sectionDesktop: {
        display: 'none',
        [breakpoints.up('md')]: {
            display: 'flex'
        }
    },
    sectionMobile: {
        display: 'flex'
    },
})

Стили передаются компоненту с помощью:

export default withStyles(styles)(Toolbar)

Я прочитал, что не нужно создавать собственную тему, так как тема по умолчанию будет автоматически передана функциям.Однако свойство точки прерывания темы не определено, что приводит к пустой странице.

Спасибо за вашу помощь

Редактировать

Вот кодкомпонент, который все еще будет создавать проблему без каких-либо других компонентов.

import * as React from 'react'
import {
    Theme
} from '@material-ui/core'
import {
    createStyles,
    WithStyles,
    withStyles
} from '@material-ui/styles'
// import Drawer from '../Drawer'

const styles = ({breakpoints}: Theme) => createStyles( {
    grow: {
        flexGrow: 1
    },
    menuButton: {
        marginLeft: -12,
        marginRight: 20
    },
    sectionDesktop: {
        display: 'none',
        [breakpoints.up('md')]: {
            display: 'flex'
        }
    },
    sectionMobile: {
        display: 'flex'
    },
})

namespace Toolbar {
    interface Props {
    }

    export interface State {
        isOpen : boolean
        mobileMoreAnchorEl? : EventTarget & HTMLElement
    }

    export type AllProps = Props & WithStyles<typeof styles>
}

class Toolbar extends React.Component<Toolbar.AllProps, Toolbar.State> {
    constructor(props: Toolbar.AllProps, context?: any) {
        super(props, context);
        this.state = { isOpen: false, mobileMoreAnchorEl: undefined}
    }

    render() {
        const { classes } = this.props
        // const { isOpen } = this.state

        return(
            <React.Fragment>
                <div className={classes.sectionDesktop}>
                    Hello
                </div>
                <div className={classes.sectionMobile}>
                    World
                </div>
            </React.Fragment>
        )
    }

}

export default withStyles(styles)(Toolbar)

Файл main.tsx (он же index.js) выглядит следующим образом:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createBrowserHistory } from 'history';
import { configureStore } from 'app/store';
import { Router } from 'react-router';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { App } from './app';

// prepare store
const history = createBrowserHistory()
const store = configureStore()
const theme = createMuiTheme()

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <MuiThemeProvider theme={theme} >
        <App />
      </MuiThemeProvider>
    </Router>
  </Provider>,
  document.getElementById('root')
);

Итак, добавление MuiThemeProvider непомощь.

Answer 1

ОБНОВЛЕНИЕ

В то время, когда этот ответ был впервые написан, @material-ui/styles был нестабильным.Это больше не так (начиная с v4), но, как правило, лучше импортировать из @material-ui/core/styles, поскольку тема по умолчанию не будет доступна при импорте из @material-ui/styles.

---

Вы можете прочитать здесь , что @material-ui/styles нестабильно (альфа-версия).

В моем CodeSandbox вы заметите, что я использую:

import { withStyles, createStyles } from "@material-ui/core/styles";

вместо того, чтобы импортировать их из @material-ui/styles.Когда я использую тот же импорт, что и вы, я могу воспроизвести вашу проблему.