React JS和material-ui错误

时间:2017-11-07 15:28:48

标签: javascript reactjs material-ui

我想使用材料-ui和reactjs。当我想渲染FlatButton时,我收到此错误:TypeError: _context$muiTheme is undefined

我是使用reactjs的新手,我不知道可能是什么错误。这是我的代码:

import React, {Component} from 'react'
import { Alert, Button, Jumbotron,  Form } from 'reactstrap';
import FlatButton from 'material-ui/FlatButton';
import TextInput from './TextInput'

export default class LoginForm extends Component {
  state = {
    username: '',
    password: ''
  }

  handleInputChange = (event) => {
    const target = event.target;
    const value = target.type ===
        'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  componentDidMount() {
    this.primaryInput.focus();
  }

  onSubmit = (event) => {
    event.preventDefault()
    this.props.onSubmit(this.state.username, this.state.password)
  }

  render() {
    const errors = this.props.errors || {}

    return (
        <Form onSubmit={this.onSubmit}>
          {errors.non_field_errors?<Alert color="danger">{errors.non_field_errors}</Alert>:""}
          <TextInput name="username" label="Username" error={errors.username} getRef={input => this.primaryInput = input} onChange={this.handleInputChange}/>
          <TextInput name="password" label="Password" error={errors.password} type="password" onChange={this.handleInputChange}/>
          <FlatButton label="Primary" type="submit" primary={true} />
        </Form>

    )
  }
}

有什么想法吗?

感谢。

1 个答案:

答案 0 :(得分:2)

docs表示您需要使用MuiThemeProvider作为应用程序的包装。

例如:

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import FlatButton from 'material-ui/FlatButton';

<MuiThemeProvider>
  <FlatButton label="Primary" type="submit" primary={true} />
</MuiThemeProvider>