[英]Adjusting the Div heights in Material UI using grid
对于我的项目,我的任务是使用 material-ui。 有没有办法减少包含“登录方式”文本的 div 的宽度高度,如图所示,使按钮更接近文本?
由此:
对此:
编码:
<div className={classes.root}>
<Grid
container
direction="row"
spacing={0}
>
<React.Fragment>
<Grid item xs={6} container direction="row">
<Grid item xs={12}>
<h1>Sign In With</h1>
</Grid>
<Grid item xs={12} container>
<Grid item xs={3}>
<Button
className={classes.buttonGoogle}
onClick={() => {
if (props.onSelectGoogle !== undefined)
props.onSelectGoogle('google');
}}
>
Google
</Button>
</Grid>
<Grid item xs={3}>
<Button
className={classes.buttonLinkedIn}
onClick={() => {
if (props.onSelectLinkedIn !== undefined)
props.onSelectLinkedIn('linkedin');
}}
>
LinkedIn
</Button>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<div className={classes.LoginImage}></div>
</Grid>
</React.Fragment>
</Grid>
</div>
非常感谢!
第一层网格就足够了,里面的只是使事情复杂化。 我删除了内部网格(包含标题和按钮的网格)。
你可以在title和buttonsContainer中添加一些styles
<div className={classes.root}>
<Grid container direction="row" spacing={0} >
<Grid item xs={6} >
<h1 className={classes.title} >Sign In With</h1>
<div className={classes.buttonsContainer} >
<Button
className={classes.buttonGoogle}
onClick={() => {
if (props.onSelectGoogle !== undefined)
props.onSelectGoogle('google');
}}
>Google</Button>
<Button
className={classes.buttonLinkedIn}
onClick={() => {
if (props.onSelectLinkedIn !== undefined)
props.onSelectLinkedIn('linkedin');
}}
>LinkedIn</Button>
</div>
</Grid>
<Grid item xs={6}>
<div className={classes.LoginImage}></div>
</Grid>
</Grid>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.