当我将React与Material UI一起使用时,未被捕获的TypeError:Object(...)不是一个函数

时间:2018-08-07 13:52:28

标签: reactjs object themes material-ui

嗨,我有Material UI警报对话框窗口组件。我试图在没有MuiThemeProvider的情况下使用它,但是却遇到了未定义的错误,因此我添加了此内容,并且我读到默认主题为light,所以我也尝试对其进行初始化。我是这个图书馆的新手,所以找不到我的错误。任何帮助将不胜感激。:

import React from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Slide from '@material-ui/core/Slide';
import {MuiThemeProvider, createMuiTheme} from '@material-ui/core/es/styles/MuiThemeProvider';

function Transition(props) {
  return <Slide direction="up" {...props} />;
}

const theme = createMuiTheme({
  palette: {
    type: 'light'
  }
});

class RemoveDialogWindow extends React.Component {
  state = {
    open: false
  };

  handleClickOpen = () => {
    this.setState({open: true});
  };

  handleClose = () => {
    this.setState({open: false});
  };

  render() {
    return (
      <div>
        <MuiThemeProvider theme={theme}>
          <Button onClick={this.handleClickOpen} className='buttonRemove'>REMOVE</Button>
          <Dialog
            open={this.state.open}
            TransitionComponent={Transition}
            keepMounted
            onClose={this.handleClose.bind(this)}
            aria-labelledby="alert-dialog-slide-title"
            aria-describedby="alert-dialog-slide-description"
          >
            <DialogTitle id="alert-dialog-slide-title">
              {"Use Google's location service?"}
            </DialogTitle>
            <DialogContent>
              <DialogContentText id="alert-dialog-slide-description">
                Let Google help apps determine location. This means sending anonymous location data to
                Google, even when no apps are running.
              </DialogContentText>
            </DialogContent>
            <DialogActions>
              <Button onClick={this.handleClose.bind(this)} color="primary">
                Disagree
              </Button>
              <Button onClick={this.handleClose.bind(this)} color="primary">
                Agree
              </Button>
            </DialogActions>
          </Dialog>
        </MuiThemeProvider>
      </div>
    );
  }
}

export default RemoveDialogWindow;

但是当我尝试运行它时,出现此错误:

 RemoveDialogWindow.js:15 Uncaught TypeError: Object(...) is not a function
    at Object.<anonymous> (RemoveDialogWindow.js:15)
    at Object../src/components/search/RemoveDialogWindow.js (main.bundle.js:169240)

0 个答案:

没有答案