我怀疑容器组件给你带来了问题。因为你还没有链接它的实现，请看下面的一个工作示例。
由于材料使用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);

最佳实践是测试所有断点并指定每个屏幕宽度的空间分配。

<Grid item xs={12} sm={12} md={12} lg={6} xl={4}>

</Grid>

xs，超小0px
小号：600px
MD，中等：960px
大图像：1280像素。
xl，特大号：小行星1920
https://material-ui.com/customization/breakpoints/

xs定义组件将要使用的网格数。它应用于所有优先级最低的屏幕尺寸。
sm定义组件将要使用的网格数。如果没有覆盖，它将应用于sm断点和更宽的屏幕。
md定义组件将要使用的网格数。如果没有覆盖，它将应用于md断点和更宽的屏幕。

(and等等）更多信息：https://material-ui.com/api/grid/

对于那些使用styled-components的Material UI的用户，下面是我如何使网格项正确增长的：

import GridBase from "@material-ui/core/Grid";

const Grid = styled(GridBase)`
  .MuiGrid-root {
    flex-grow: 1;
  }
`

现在您可以在组件中正常使用Grid。

我知道这是个老问题，但还是想和大家分享一下。
代码中的问题是**spacing={24}**（基于文档Spacing）。默认情况下，两个网格项之间的间距遵循线性函数：output(spacing) = spacing * 8px
例如，spacing={24}创建了一个192 px宽的间隙。因此，最后，可用于内容的空间非常小。

<Grid container spacing={2}> //  usually 2 or 3  is quite enough for me
  <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>

我也遇到过这个问题。解决这个问题的方法是使用“sx”属性使父网格的宽度= 100%。请参见下面的代码：

<Box sx={{ width: '100%' }}>
<Button variant="contained" fullWidth> myButton </Button>
</Box>