Nie można odczytać właściwości 'prepareStyles' nieokreślonego

Question

Próbuję otworzyć pole Dialog za pomocą kliknięcia przycisku. Kiedy jestem kliknięcie przycisku Dialog przede wszystkim nie jest otwierany i otrzymuję błąd:

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

Oto kod dla mojego składnika:

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> 
    ); 
    } 
} 

Proszę zasugerować. Uwaga: muszę użyć MuiThemeProvider

Answer 1

All komponent materialny-UI musi być renderowany wewnątrz <MuiThemeProvider></MuiThemeProvider> tagu, więc musimy owinąć najwyższego elementu (lub co najmniej dowolny składnik nadrzędny) w MuiThemeProvider składnik materiałowy-ui w.

---

Problem jest Twój Dialog jest poza znacznikiem MuiThemeProvider, umieścić okno również wewnątrz niej, powinno działać.

napisać to tak:

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

Sugestia:

Jeśli używasz materialne elementy interfejsu użytkownika w wielu składników, a potem nie ma potrzeby, aby umieścić tag MuiThemeProvider na każdej stronie, a nie, że można umieścić na stronie głównej lub lepiej umieścić na stronie index.js, gdzie zdefiniowaliśmy wszystkie trasy, takie jak:

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

Nie mam wystarczającej liczby przedstawicieli, aby wypowiedzieć się na temat odpowiedzi Mayank, ale są one poprawne. Aby rozwinąć odpowiedź na temat Mayaka, wystarczy dodać <MuiThemeProvider></<MuiThemeProvider> do głównego kontenera aplikacji. Jeśli to zrobisz, nigdy nie powinieneś się martwić, że dodasz go nigdzie indziej w swojej aplikacji.

Uwaga składnikiem dominującym po lewej i składnik dziecko w tym obrazie: