获取未捕获TypeError：尝试打开对话框时无法读取未定义的属性“prepareStyles” [英] Getting Uncaught TypeError: Cannot read property 'prepareStyles' of undefined while trying to open a Dialog

问题描述

我试图通过按钮点击打开一个对话框框。
当我点击按钮时，对话框首先没有打开，我收到错误：未捕获类型错误：无法读取属性 prepareStyles'未定义。

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

推荐答案

我认为问题是，你的Dialog不在MuiThemeProvider标签之外，把对话框也放在里面，它应该可以工作。尝试这样：

I think the issue is, your Dialog is outside of the MuiThemeProvider tag, put dialog also inside it, it should work. try 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>

建议：如果您在许多组件中使用物质的ui元素，则不需要将MuiThemeProvider标签放在每个页面，而不是你可以放在你的主页或更好地放在index.js页面，我们用来定义所有的路线，像这样：

Suggestion: 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({
      palette: {
         alternateTextColor: darkBlack,
         primary1Color: grey100,
     }
})   

ReactDOM.render((
  <MuiThemeProvider muiTheme={muiThemebtn}>
      <Router history={hashHistory}>
          <Route path="/" component={comp1}>
            <Route path="/abc" component={comp2}/>
          </Route>
      </Router>
  </MuiThemeProvider>
), document.getElementById('app'));

这篇关于获取未捕获TypeError：尝试打开对话框时无法读取未定义的属性“prepareStyles”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！