VM84:36 Warning: Failed context type: The context `muiTheme` is marked as required in `DatePicker`, but its value is `undefined`.

First I got this warning -

Warning: Failed context type: The context muiTheme is marked as required in DatePicker, but its value is undefined.

Then - When clicked on ‘DatePicker’ component nothing happens. DatePicker popup does not open up.

Steps to reproduce

1. Require the DatePicker import React from ‘react’; import DatePicker from ‘material-ui/DatePicker’;
2. Use it in your component.

Versions

• Material-UI:

“material-ui”: “^0.19.1”,

• React: “react”: “^0.14.3”, “react-dom”: “^0.14.3”,
• Browser: Chrome, Mozilla Note: I am not using any react-tap-event plugin. Previously I used “react-tap-event-plugin”: “^0.2.2”, but issue was still there so I removed it.

[Anushree-Desai]

I am using DateTimePicker as below:

import DateTimePicker from 'material-ui-datetimepicker';
import DatePickerDialog from 'material-ui/DatePicker/DatePickerDialog';
import TimePickerDialog from 'material-ui/TimePicker/TimePickerDialog';

<DateTimePicker
     onChange={this.setDate}
     DatePicker={DatePickerDialog}
     TimePicker={TimePickerDialog}
/>

It is throwing below error: warning.js:36 Warning: Failed context type: The context muiTheme is marked as required in TextField, but its value is undefined.

And

Cannot read property ‘prepareStyles’ of undefined

[techyrajeev]

Thanks @oliviertassinari. BTW I fixed it via wrapping inside MuiThemeProvider.

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

require('../../sass/app.scss');

const App = ({children}) => (
  <MuiThemeProvider>
          <div className="main">
                {/*{ isGrayNav ? <GrayNavBar/> : <MainNavBar/> } */}
                {children}
                <Footer/>
           </div>
  </MuiThemeProvider>
);

export default App;