What's the right way to float right or left using the material-ui appbar with material-ui-next?
ReactjsMaterial UiMaterial Designnext.jsReact Flexbox-GridReactjs Problem Overview
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>
Reactjs Solutions
Solution 1 - Reactjs
@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>
Solution 2 - Reactjs
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>
Solution 3 - Reactjs
Just use the property align="right" as shown here https://mui.com/api/typography/