0

I want to use material-ui with reactjs. When I want to render a FlatButton, I get this error: TypeError: _context$muiTheme is undefined

I'm new using reactjs and I do not know what could be the error. Here is my code:

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>

    )
  }
}

Any ideas?

Thanks.

1 Answer 1

2

The docs say that you need to use the MuiThemeProvider as a wrapper over your app.

For example :

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

<MuiThemeProvider>
  <FlatButton label="Primary" type="submit" primary={true} />
</MuiThemeProvider>
Sign up to request clarification or add additional context in comments.

1 Comment

Works ! Thank you !!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.