Cannot read property 'prepareStyles' of undefined

Question

I am trying to open a Dialog box by a button click. When I am clicking the button the Dialog first of all is not opened and I am getting Error :

Uncaught TypeError: Cannot read property 'prepareStyles' of undefined.

Here is the code for my Component:

const muiThemebtn = getMuiTheme({
    palette: {
    alternateTextColor: darkBlack,
    primary1Color: grey100,
  }
})

export default class MyComponent extends React.Component {
  constructor (props) {
    super(props);
    this.state = {open: true};
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }


  openModal=()=>{ this.setState({open: true}); }

  closeModal=()=>{ this.setState({open: false}); }

  render () {

          const actions = [
            <FlatButton
              label="Cancel"
              primary={true}
              onTouchTap={this.handleClose}
            />,
            <FlatButton
              label="Submit"
              primary={true}
              keyboardFocused={true}
              onTouchTap={this.handleClose}
            />,
          ];
        return (
          <div>
            <MuiThemeProvider muiTheme={muiThemebtn}>
                <RaisedButton label={Lang.AddUser} 
                  onTouchTap={this.openModal}
                  primary={true}
                  display='none'
                  icon={<ContentAddBox color={darkBlack} style={{backgroundColor:'#e3e3e3'}}/>}
                  />
              </MuiThemeProvider>
              <Dialog
                title="Scrollable Dialog"
                actions={actions}
                modal={false}
                open={this.state.open}
                onRequestClose={this.handleClose}
                autoScrollBodyContent={true}
              >
              Dialog Text
              </Dialog>
          </div>
     );
   }
}

Please suggest. Note: I need to use the MuiThemeProvider

Answer 1

All the material-ui component must be rendered inside <MuiThemeProvider></MuiThemeProvider> tag, so we need to wrap topmost component (or at least any parent component) in material-ui's MuiThemeProvider component.

---

Issue is, your Dialog is outside of the MuiThemeProvider tag, put dialog also inside it, it should work.

Write it like this:

    <div>
        <MuiThemeProvider muiTheme={muiThemebtn}>
            <RaisedButton label={Lang.AddUser} 
              onTouchTap={this.openModal}
              primary={true}
              display='none'
              icon={<ContentAddBox color={darkBlack} style={{backgroundColor:'#e3e3e3'}}/>}
            />
           <Dialog
             title="Scrollable Dialog"
             actions={actions}
             modal={false}
             open={this.state.open}
             onRequestClose={this.handleClose}
             autoScrollBodyContent={true}
           >
             Dialog Text
          </Dialog>
       </MuiThemeProvider>
    </div>

Suggestion:

If you are using material ui elements in many components, then no need to put MuiThemeProvider tag on each page instead of that you can put in you homepage or better to put in index.js page, where we used to define all the routes, like this:

const muiThemebtn = getMuiTheme()   

ReactDOM.render((
  <MuiThemeProvider muiTheme={muiThemebtn}>
      <Router history={hashHistory}>
          <Route path="/" component={comp1}>
            <Route path="/abc" component={comp2}/>
          </Route>
      </Router>
  </MuiThemeProvider>
), document.getElementById('app'));

Answer 2

I don't have enough rep to comment on Mayank's answer but they are correct. To further elaborate on Maynak's answer, you only need to add <MuiThemeProvider></<MuiThemeProvider> to the main app container. If you do that, you should never have to worry about adding it anywhere else in your app.

Note the parent component on the left and the child component in this image: