React 和 Material-UI：使用 TypeScript 在 createStyles() 中未定义主题

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

未捕获的类型错误：无法读取未定义的属性“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)

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

感谢您的帮助

Edit

这是在没有任何其他组件的情况下仍然会产生问题的组件的代码。

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 没有帮助。

UPDATE

在第一次写这个答案的时候，@material-ui/styles不稳定。它不再是（从 v4 开始），但通常最好还是从@material-ui/core/styles因为从以下位置导入时默认主题将不可用@material-ui/styles.

你可以阅读here https://material-ui.com/css-in-js/basics/ that @material-ui/styles不稳定（alpha 版本）。

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

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

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

v5 更新

在 v5 中，使用makeStyles and withStyles已被弃用，并且它们已从@material-ui/core并且只能通过以下方式访问@material-ui/styles。在 v5 中，makeStyles and withStyles除非您通过以下方式提供访问权限，否则无权访问该主题ThemeProvider（为此，您应该使用两者的最新 v5 版本@material-ui/core and @material-ui/styles）。下面是一个有效的 v5 示例。

import React from "react";
import ReactDOM from "react-dom";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import { withStyles } from "@material-ui/styles";
const styles = ({ breakpoints }) => ({
  grow: {
    flexGrow: 1
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20
  },
  sectionDesktop: {
    display: "none",
    [breakpoints.up("md")]: {
      display: "flex"
    }
  },
  sectionMobile: {
    display: "flex"
  }
});
const MyToolbar = (props) => {
  return (
    <>
      <div className={props.classes.sectionDesktop}>Section Desktop</div>
      {props.children}
      <div className={props.classes.sectionMobile}>Section Mobile</div>
    </>
  );
};
const theme = createTheme();
const StyledToolbar = withStyles(styles)(MyToolbar);
function App() {
  return (
    <ThemeProvider theme={theme}>
      <StyledToolbar>
        <div>Hello</div>
        <div>CodeSandbox</div>
      </StyledToolbar>
    </ThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);