0
229
ViewsWhat's the right way to float right or left using the material-ui appbar with material-ui-next?
I can't figure out if I'm using the right approach to get the login/logout buttons to float right in while using material-ui-next ("material-ui": "^1.0.0-beta.22",)
It seems they removed iconElementRight= from the api. Do we have to use the <Grid> now in the appbar? It feels kinds of cludgy. What's the right way to float buttons (e.g. login) in the appbar?
<AppBar position="static">
<Toolbar>
<Grid container spacing={24}>
<Grid item xs={11}>
<Typography type="title" color="inherit">
Title
</Typography>
</Grid>
<Grid item xs={1}>
<div>
<HeartIcon />
<Button raised color="accent">
Login
</Button>
</div>
</Grid>
</Grid>
</Toolbar>
</AppBar>
·
Santiago Trujillo
3 answers
Answer question0
@Kyle You had it right :)
just add to the grid container:
justify="space-between"
With your example:
<AppBar position="static">
<Toolbar>
<Grid
justify="space-between" // Add it here :)
container
spacing={24}
>
<Grid item>
<Typography type="title" color="inherit">
Title
</Typography>
</Grid>
<Grid item>
<div>
<HeartIcon />
<Button raised color="accent">
Login
</Button>
</div>
</Grid>
</Grid>
</Toolbar>
</AppBar>
·
Santiago Trujillo
Report
0
You need to add flex: 1 to your <Typography /> component so it pushes the <div /> to the rightmost part of the AppBar:
<AppBar position="static">
<Toolbar>
<Typography type="title" color="inherit" style={{ flex: 1 }}>
Title
</Typography>
<div>
<HeartIcon />
<Button raised color="accent">
Login
</Button>
</div>
</Toolbar>
</AppBar>
·
Santiago Trujillo
Report
0
Just use the property align="right" as shown here https://mui.com/api/typography/
·
Santiago Trujillo
Report
Answer question