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

Question

我正在尝试通过单击按钮打开 Dialog 框。当我点击按钮时，Dialog 首先没有打开，我收到错误：

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

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>

建议:

如果您在许多组件中使用 material 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'

Cannot read property 'prepareStyles' of undefined

components

dialog

reactjs

material-ui

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

Cannot read property 'prepareStyles' of undefined

components

dialog

reactjs

material-ui

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