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>
@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>