使用带有 material-ui-next 的 material-ui 应用栏向右或向左浮动的正确方法是什么?
What's the right way to float right or left using the material-ui appbar with material-ui-next?
我不知道在使用 material-ui-next ("material-ui": "^1.0.0-beta.22",)
他们似乎从 api 中删除了 iconElementRight=
。我们现在必须在应用栏中使用 <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>
您需要将 flex: 1
添加到您的 <Typography />
组件,以便它将 <div />
推到 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 你说得对 :)
只需添加到网格容器:
justify="space-between"
以你为例:
<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>
只需使用 属性 align="right"
如图所示 https://mui.com/api/typography/
我不知道在使用 material-ui-next ("material-ui": "^1.0.0-beta.22",)
他们似乎从 api 中删除了 iconElementRight=
。我们现在必须在应用栏中使用 <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>
您需要将 flex: 1
添加到您的 <Typography />
组件,以便它将 <div />
推到 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 你说得对 :)
只需添加到网格容器:
justify="space-between"
以你为例:
<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>
只需使用 属性 align="right" 如图所示 https://mui.com/api/typography/