如何正确地使用 Materials-ui appbar 和 Materials-ui-next 来向右或向左浮动？

我不知道我是否使用了正确的方法来获得登录/注销按钮，以便在使用 Materials-ui-next (“ Materials-ui”: “ ^ 1.0.0-beta.22”,)时正确地浮动

看来他们把 iconElementRight=从 API 上移除了。我们现在必须在应用程序栏中使用 <Grid>吗？感觉有点累。什么是浮动按钮的正确方式(例如登录)在应用程序栏？

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

128435 次浏览

小开

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>

小开

最佳答案

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

小开

Just use the property align="right" as shown here https://mui.com/api/typography/

小开

Fresh variant:

<Grid
container
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Grid item>Back</Grid>
<Grid item>Next</Grid>
</Grid>

小开

<Toolbar>
<Box sx=\{\{ flexGrow: 1 }}>
<Button variant='text' color='inherit'>Button1</Button>
<Button variant='text' color='inherit'>Button2</Button>
<Button variant='text' color='inherit'>Button3</Button>
</Box>
<Button variant='text' color='inherit'>Button4</Button>
</Toolbar>

Now Button4 will be positioned in the far right!