使用material-ui-next的FullWidthGrid组件报错：classes属性未定义

这个错误很常见，核心原因是你没有正确通过withStyles高阶组件将样式类注入到组件中，导致组件无法获取到必填的classes属性。下面是修正后的完整代码，以及关键步骤的解释：

修正后的完整代码 #

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, // 补全你未写完的颜色属性
  },
});

// 定义组件并接收classes作为props
function FullWidthGrid(props) {
  const { classes } = props; // 解构获取withStyles注入的样式类

  return (
    <div className={classes.root}>
      <Grid container spacing={24}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={6}>
          <Paper className={classes.paper}>xs=6</Paper>
        </Grid>
        <Grid item xs={6}>
          <Paper className={classes.paper}>xs=6</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

// 声明classes为必填prop，符合Material-UI的组件要求
FullWidthGrid.propTypes = {
  classes: PropTypes.object.isRequired,
};

// 用withStyles包装组件，自动注入样式类到组件props
const StyledFullWidthGrid = withStyles(styles)(FullWidthGrid);

// 渲染被样式包装后的组件，而非原始的FullWidthGrid
ReactDOM.render(
  <StyledFullWidthGrid />,
  document.getElementById('root') // 确保你的HTML文件中存在id为root的容器元素
);

关键修正点说明 #

• 解构classes props：FullWidthGrid组件必须从props中取出classes，这是withStyles高阶组件自动注入的，不能省略。
• 用withStyles包装组件：需要将你定义的styles传入withStyles，再用它包装原始组件，生成一个带样式的新组件（示例中为StyledFullWidthGrid），渲染时必须使用这个包装后的组件。
• 补全样式定义：你的styles中color属性未写完，我补全为Material-UI标准配色theme.palette.text.secondary，你可以根据需求修改。
• PropTypes声明：明确classes是必填的object类型，既能符合Material-UI的组件规范，也能在开发阶段帮你快速捕获props错误。

内容的提问来源于stack exchange，提问作者Tazo leladze