5

I am struggling to align a button and a <Typography> component on the same line:

Here is what I have so far:

<Grid item lg={12} md={12} sm={12} xs={12} className={classes.register}>
    <Typography noWrap className={classes.typoText} variant="subtitle2">
        text1
    </Typography>

    <ButtonBase className={classes.labelForgot} disableFocusRipple="false" disableRipple="false" centerRipple="false">
        <Typography noWrap className={classes.labelForgot} variant="subtitle2">
            text2
        </Typography>
    </ButtonBase>
</Grid>

My styles:

labelForgot: {
    color: 'rgba(20, 176, 12,0.9)',
    backgroundColor: 'transparent',
    paddingLeft: 2,
    '&:hover': {
        color: 'rgb(57, 232, 48)',
        backgroundColor: 'transparent',
    }
},
root: {
    backgroundSize: 'cover', 
    backgroundPosition: 'center center',
    backgroundRepeat: 'no-repeat',
    minHeight: '100vh',
    justifyContent:'center', 
    overflow: 'hidden',
},
gridMain: {
    margin: '0 auto',
    maxWidth: 300,
},

Basically I have a <div> that allows a height of ยด100%`.

For the container I use css grid main.

Here is the result

Andrew Hill
  • 2,165
  • 1
  • 26
  • 39
Spirit Yang
  • 97
  • 1
  • 1
  • 8

1 Answers1

2

how to align horizontal icon and text in material ui

Check this page. I was stuck on the same problem... The suggested solution is wrapping the items with a div...

<div style={{
          display: 'flex',
          alignItems: 'center'
}}>
   <Typography noWrap className={classes.typoText} variant="subtitle2">
       text1
   </Typography>

   <ButtonBase className={classes.labelForgot} disableFocusRipple="false" 
      disableRipple="false" centerRipple="false">
      <Typography noWrap className={classes.labelForgot} variant="subtitle2">
         text2
      </Typography>
   </ButtonBase>
</div>

I tried to do it with Grids as well from Material UI but was having trouble with a header and buttons

Stockster
  • 99
  • 9