reactjs - 无法读取未定义的属性 'prepareStyles'

我试图通过单击按钮来打开Dialog框。
当我单击按钮时，首先没有打开Dialog，并且出现错误:



这是我的组件的代码:

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

最佳答案

所有material-ui组件必须呈现在<MuiThemeProvider></MuiThemeProvider>标记内，因此我们需要将最顶层的组件(或至少任何父组件)包装在material-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'));

关于reactjs - 无法读取未定义的属性 'prepareStyles'，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41045594/