2017-11-07 14 views
0

reactjsでmaterial-uiを使用したいと思います。フラットボタンをレンダリングしたいときは、次のエラーが表示されます。TypeError: _context$muiTheme is undefinedReact JSとmaterial-uiエラー

私は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> 

    ) 
    } 
} 

アイデア?

ありがとうございました。

答えて

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> 
+0

作品!ありがとうございました !! – Aceconhielo