Question

我试图通过点击按钮打开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

Answer 1

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

Answer 2

我没有足够的代表对Mayank的回答发表评论，但他们是正确的。要进一步详细说明Maynak的答案，您只需要将<MuiThemeProvider></<MuiThemeProvider>添加到主应用容器中。如果你这样做，你就不必担心在应用程序的任何其他地方添加它。

请注意左侧的父组件和此图像中的子组件：

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

2 个答案: