React＆Material-UI：使用TypeScript在createStyles（）中未定义主题

Question

我正在用TypeScript学习React，并在前端使用Material UI框架。我尝试使媒体查询正常工作，但出现错误：

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)

我读到不需要创建自定义主题，因为默认主题将自动传递给函数。但是，主题的breakpoints属性未定义，导致出现空白页。

谢谢你的帮助

编辑

这是该组件的代码，如果没有其他任何组件，仍然会产生问题。

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不稳定（alpha版本）。

您会在我的CodeSandbox中注意到我正在使用：

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

而不是从导入这些@material-ui/styles。当我使用与您相同的导入文件时，便可以重现您的问题。