我试图Dialog通过单击按钮打开一个框。当我单击按钮时,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
MuiThemeProvider
所有material- ui组件必须呈现在<MuiThemeProvider></MuiThemeProvider>tag内,因此我们需要将最顶层的组件(或至少任何父组件)包装在material- ui的MuiThemeProvider组件中。
<MuiThemeProvider></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'));