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

问题描述

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

<块引用>

未捕获的类型错误:无法读取未定义的属性prepareStyles".

这是我的组件的代码:

const muiThemebtn = getMuiTheme({调色板:{替代文本颜色:深黑色，原色1:灰色100，}})导出默认类 MyComponent 扩展 React.Component {构造函数(道具){超级(道具)；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});}使成为 () {常量动作 = [
<MuiThemeProvider muiTheme={muiThemebtn}><RaisedButton 标签={Lang.AddUser}onTouchTap={this.openModal}主要={真}显示='无'图标={<ContentAddBox 颜色={darkBlack} 样式={{backgroundColor:'#e3e3e3'}}/>}/></MuiThemeProvider><对话title="可滚动对话框"动作={动作}模态={假}打开={this.state.open}onRequestClose={this.handleClose}autoScrollBodyContent={true}>对话文本</对话></div>);}}

请提出建议.注意:我需要使用 MuiThemeProvider

解决方案

所有material-ui组件必须在<MuiThemeProvider></MuiThemeProvider>标签内渲染，所以我们需要包装material-ui 的 MuiThemeProvider 组件中的最顶层组件(或至少任何父组件).

<小时>

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

这样写:

 <div><MuiThemeProvider muiTheme={muiThemebtn}><RaisedButton 标签={Lang.AddUser}onTouchTap={this.openModal}主要={真}显示='无'图标={<ContentAddBox 颜色={darkBlack} 样式={{backgroundColor:'#e3e3e3'}}/>}/><对话title="可滚动对话框"动作={动作}模态={假}打开={this.state.open}onRequestClose={this.handleClose}autoScrollBodyContent={true}>对话文本</对话></MuiThemeProvider></div>

建议:

如果你在很多组件中使用了材质的ui元素，那么不需要在每个页面上放置MuiThemeProvider标签，你可以把它放在你的主页或者更好地放在index.js页面中，我们曾经在这里定义了所有的路线，像这样:

const muiThemebtn = getMuiTheme()ReactDOM.render((<MuiThemeProvider muiTheme={muiThemebtn}><路由器历史={hashHistory}><Route path="/" 组件={comp1}><路由路径="/abc" 组件={comp2}/></路线></路由器></MuiThemeProvider>), document.getElementById('app'));

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.

Here is the code for my Component:

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

Please suggest. Note: I need to use the 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.

---

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

Write it like 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>

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()   

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屋！