Unable to read property "readyStyles" from undefined

Question

I am trying to open a Dialog window by pressing a button. When I click the button, Dialog first does not open, and I get an error message:

Uncaught TypeError: Cannot read the 'readyStyles' property from 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 offer. Note. I need to use MuiThemeProvider

Answer 1

The entire material-ui component should be displayed inside the <MuiThemeProvider></MuiThemeProvider> , so we need to wrap the top component (or at least any parent component) in the material-ui MuiThemeProvider .

---

The problem is that your Dialog is outside the MuiThemeProvider tag, insert a dialog and inside it, it should work.

Write 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> 

Sentence:

If you use ui material elements in many components, then you do not need to put the MuiThemeProvider tag on each page instead of placing it on your home page or better placing it on index.js, where we used to determine all the routes, for example:

 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 comments to comment on Mayank’s answer, but they are correct. To continue developing Maynak’s answer, you need to add <MuiThemeProvider></<MuiThemeProvider> to the main application container. If you do this, you will never have to worry about adding it to another location in your application.

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