反应材料-UI：使用TypeScript的createStyles()中未定义的主题(&A) [英] React & Material-UI: Theme undefined in createStyles() with TypeScript

问题描述

我正在学习使用TypeScript做出反应，并将材料UI框架用于前端。我尝试使媒体查询正常工作，但收到错误：

未捕获的TypeError：无法读取未定义的属性‘up’ at Style(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无济于事。

推荐答案

更新

在第一次编写此答案时，@material-ui/styles不稳定。现在不再是了(从v4开始)，但通常还是最好从@material-ui/core/styles导入，因为从@material-ui/styles导入时默认主题将不可用。

---

您可以看到here@material-ui/styles不稳定(Alpha版)。

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

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

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

---

v5更新

在v5中，不推荐使用makeStyles和withStyles，它们已从@material-ui/core中删除，只能通过@material-ui/styles访问。在v5中，makeStyles和withStyles没有访问主题的权限，除非您通过ThemeProvider提供访问(要使其正常工作，您应该使用@material-ui/core和@material-ui/styles的最新v5版本)。下面是一个有效的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);

这篇关于反应材料-UI：使用TypeScript的createStyles()中未定义的主题(&A)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！