無法讀取undefined屬性'prepareStyles'

我試圖通過單擊按鈕打開Dialog框。當我點擊Dialog首先是未打開按鈕，我得到錯誤：無法讀取undefined屬性'prepareStyles'

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

這裏是我的組件的代碼：

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

請建議。注：我需要使用MuiThemeProvider

來源

2016-12-08 NDeveloper

所有材料的UI組件必須內<MuiThemeProvider></MuiThemeProvider>標記中呈現，所以我們需要包裝材料的UI的MuiThemeProvider分量最上面的組件（或者至少任何父組件）。

的問題是，你的對話框是MuiThemeProvider標籤之外，把對話也在裏面，它應該工作。

寫這樣的：

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

建議：

如果您使用的許多組件材料的UI元素，則沒有必要把MuiThemeProvider標籤在每一頁上，而不是你能把你的主頁或更好的放在index.js頁面，我們用來定義所有路線，如下所示：

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

來源

2016-12-08 17:49:34

我沒有足夠的代表評論Mayank的答案，但他們是正確的。爲了進一步闡述Maynak的答案，您只需將<MuiThemeProvider></<MuiThemeProvider>添加到主應用容器。如果你這樣做，你永遠不用擔心在應用程序的其他任何地方添加它。

注意此圖像中左側的父組件和子組件：

來源

2016-12-09 04:11:02

不錯的建議，對不起，我忘了提，我加你的建議我的回答，+1爲此，現在你有信譽評論任何帖子:) –

Woot！謝謝：） –

無法讀取undefined屬性'prepareStyles'

回答

相關問題