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

Posted 2023-02-23

【中文标题】无法读取未定义的属性“prepareStyles”

【英文标题】：Cannot read property 'prepareStyles' of undefined

【发布时间】：2017-04-24 01:22:17

【问题描述】：

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

未捕获的类型错误：。

这是我的组件的代码：

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

【参考方案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'));

【参考方案2】：

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

注意左边的父组件和这张图片中的子组件：

【讨论】：

不错的建议，抱歉我忘了提，我在回答中添加了您的建议，为此 +1，现在您可以对任何帖子发表评论了 :)