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

[techyrajeev]

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.

[lyhoshva]

Probably, you should wrap DatePicker or it's parents by MuiThemeProvider

[techyrajeev]

It was working perfectly fine when I was using version - "material-ui": "^0.14.4",
But when I updated to latest version its functionality started to break.

[oliviertassinari]

@techyrajeev We made the MuiThemeProvider component required along the way. It was removed on the v1-beta.

[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;

[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