无法读取未定义的属性"prepareStyles" [英] Cannot read property 'prepareStyles' of undefined

问题描述

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

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 :

未捕获的TypeError:无法读取未定义的属性'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

Please suggest. Note: I need to use the MuiThemeProvider

推荐答案

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

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.

问题是，您的对话框在MuiThemeProvider标记之外，也将对话框放入其中，它应该可以工作.

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

这样写:

    <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页面中，在该页面中我们用来定义所有路线，例如:

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

这篇关于无法读取未定义的属性"prepareStyles"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！