材料的UI <Grid item> 組件的寬度為100％的子代與父代重疊

Question

當我在Grid項中有一個全角的子級時，這些子級在其父級的右側重疊。

我轉載了我遇到的問題的代碼。 https://codesandbox.io/s/rn88r5jmn

 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> <Grid container spacing={16}> <Grid item xs={6}> <Button variant="raised" fullWidth className={classes.button}> asdf </Button> </Grid> <Grid item xs={6}> <Button variant="raised" fullWidth className={classes.button}> asdf </Button> </Grid> </Grid> </Paper> ); } } const styles = theme => ({ button: { margin: theme.spacing.unit } }); export default withStyles(styles)(Demo); 

給我以下結果：

Answer 1

問題不在於fullWidth屬性，而是您為按鈕設置的邊距，您可以執行以下操作：

https://codesandbox.io/s/nnxl20l2q0

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);