[英]Adjusting the Div heights in Material UI using grid
For my project I'm tasked to use material-ui.对于我的项目,我的任务是使用 material-ui。 Is there a way to reduce the width height of the div containing "Sign In With" text as shown in pic to bring the buttons closer to the text?
有没有办法减少包含“登录方式”文本的 div 的宽度高度,如图所示,使按钮更接近文本?
From this:由此:
To this:对此:
The code:编码:
<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>
Thank You Very Much!非常感谢!
The First layer Grid is enough, the inside one just complicates stuff.第一层网格就足够了,里面的只是使事情复杂化。 I removed the inside grid (the one containing title and buttons).
我删除了内部网格(包含标题和按钮的网格)。
You can add some styles to title and buttonsContainer你可以在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.