小编典典

无法读取未定义的属性“ prepareStyles”

reactjs

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

未捕获的TypeError:无法读取未定义的属性’prepareStyles’。

这是我的组件的代码:

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


阅读 268

收藏
2020-07-22

共1个答案

小编典典

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