我正在尝试使用material-ui-next组件,我刚刚在我的索引中复制了FullWidthGrid示例.js并且我有很多错误...
这是我的索引.js
import React from 'react';
import ReactDom from 'react-dom';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
const styles = theme => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing.unit * 2,
textAlign: 'center',
color: theme.palette.text.secondary,
},
});
function FullWidthGrid(props) {
const { classes } = props;
return (
<div className={classes.root}>
<Grid container spacing={24}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
</Grid>
</div>
);
}
FullWidthGrid.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(FullWidthGrid);
在索引中.js:
class MyApp extends React.Component {
render () {
return (
<div>
<FullWidthGrid />
</div>
)
}
}
ReactDom.render(<MyApp />, document.getElementById('root'));
这是我的控制台中的错误消息:
类型错误: 无法读取包含 <div className={classes.root}>
的行上未定义的属性"root"
请参阅错误。
在索引中.js您需要将类属性传递给带有样式的 FullWidthGrid 组件...太糟糕了,示例没有指定它,但我认为您可以在他们的 GitHub 中找到它
例:
<FullWidthGrid classes={{paper:"paper"}} />