Reactjs 全宽 MaterialUI 网格无法正常工作

我怀疑容器组件导致了您的问题.由于您还没有链接到它的实现，请参阅下面的一个工作示例，了解您想要什么.

因为material 使用flexbox，所以他们使用属性flexGrow

flex grow CSS属性指定flex项的flex增长因子.它指定了项目在flex容器中应该占用的空间量.flex项的flex增长因子与flex容器中其他子项的大小有关.

这是控制网格中元素增长的属性.

import React from 'react';
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 CenteredGrid(props) {
  const { classes } = props;

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

CenteredGrid.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CenteredGrid);