[英]material-ui <Grid item> component's children with 100% width overlaps parent
When I have a full width children in a Grid item, the children overlaps to the right side of its parent. 当我在Grid项中有一个全角的子级时,这些子级在其父级的右侧重叠。
I have reproduced the code with the problem I'm having. 我转载了我遇到的问题的代码。 https://codesandbox.io/s/rn88r5jmn
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);
The problem isn't the fullWidth prop, but the margin you are setting to the buttons, you can do something like this instead: 问题不在于fullWidth属性,而是您为按钮设置的边距,您可以执行以下操作:
https://codesandbox.io/s/nnxl20l2q0 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.