Javascript 材料界面<；网格项目>；组件'；具有100%宽度的子对象与父对象重叠

当网格项中有一个全宽的子项时，子项将重叠到其父项的右侧

我已经复制了有问题的代码。

import React，{Component}来自“React”；
从“@material ui/core”导入{纸张、网格、按钮}；
从“@material ui/core/styles”导入{withStyles}”；
类Demo扩展了组件{
render（）{
const{classes}=this.props；
返回(
asdf
asdf
);
}
}
常量样式=主题=>({
按钮：{
页边空白：theme.space.unit
}
});
导出默认样式（样式）（演示）问题不在于全宽道具，而在于您为按钮设置的边距，您可以这样做：


import React，{Component}来自“React”；
从“@material ui/core”导入{纸张、网格、按钮}；
从“@material ui/core/styles”导入{withStyles}”；
类Demo扩展了组件{
render（）{
const{classes}=this.props；
返回(
asdf
asdf
);
}
}
常量样式=主题=>({
论文：{
填充：theme.space.unit
}
});
导出默认样式（样式）（演示）；
我明白了。我不知道100%宽度不包括边距。边距在元素外部，填充在元素内部。因此，通过将填充样式添加到父对象，可以在不添加额外宽度的情况下或多或少实现相同的效果
import React, { Component } from "react";
import { Paper, Grid, Button } from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";
class Demo extends Component {
  render() {
    const { classes } = this.props;
    return (
      <Paper className={classes.paper}>
        <Grid container spacing={16}>
          <Grid item xs={6}>
            <Button variant="raised" fullWidth>
              asdf
            </Button>
          </Grid>
          <Grid item xs={6}>
            <Button variant="raised" fullWidth>
              asdf
            </Button>
          </Grid>
        </Grid>
      </Paper>
    );
  }
}
const styles = theme => ({
  paper: {
    padding: theme.spacing.unit
  }
});
export default withStyles(styles)(Demo);