What's the right way to float right or left using the material-ui appbar with material-ui-next?
@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>
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>