Material UI - Toolbar - vertical text alignment - css

Question

I'm quite new to Material UI and I'm starting my new app in React with a toolbar (it serves as a header in my case). I break up the toolbar into a grid and create typography for each grid. However, I have two persisting issues no matter what I try:
When I list multiple items in my grid, they stack and appear vertically, rather than spaced horizontally (see intro, how it works, ..)
The text across the entire toolbar varies in vertical alignment. I'd like to have all the text, regardless of the size, start at the bottom of the toolbar.
Here's the code I have written:
To create the styles, I use:
createStyles({
root: {
padding: theme.spacing(3, 2),
height: 10,
display: "flex",
flexDirection: "column",
justifyContent: "center",
},
links: {
textDecoration: 'underline'
}
}),
);
To create the header, I do the following:
const Header = ({ siteTitle }) => {
const classes = useStyles();
return (
<Toolbar disableGutters={true}>
<Grid container spacing={3}>
<Grid item xs>
<Typography className={classes.root} variant="h4" color="secondary">profolio.page/</Typography>
</Grid>
<Grid item xs={6}>
<Typography className={classes.links} variant="h6" color="secondary">intro</Typography>
<Typography className={classes.links} variant="h6" color="secondary">how it works</Typography>
<Typography className={classes.links} variant="h6" color="secondary">professional pages</Typography>
</Grid>
<Grid item xs>
<Typography className={classes.root} variant="h6" color="secondary">Continue</Typography>
</Grid>
</Grid>
</Toolbar>
)
}
No matter what I seem to try using the documentation, nothing works. Does anyone have any suggestions on how to fix this? Additionally, is the way I am creating this considered best practice?

Answer 1

first of all, you styles above is not linked to your jsx (i.e. className={classes.root}), so you have to fix that.
Secondly, Grid Layout in material UI uses flex and your code flexDirection:'column' makes it intentionally in column direction.
something below might solve your problem;
createStyles({
root: {
padding: theme.spacing(3, 2),
height: 10,
justifyContent: "center",
alignItems: "center"
},
links: {
textDecoration: 'underline'
}
}),
);