我正在创建一个应用栏，我想要标题（Lorem ipsum 文本）在左侧，按钮在右侧，我编写了这段代码来做到这一点，但这样看来我有某种最大宽度，之后文本就会中断进入第二行，我希望它在一行中，这是代码：<AppBar position="fixed"> <Toolbar> <Typography variant="h5">Lorem Ipsum Lorem Ipsum</Typography> <Grid container item justify="flex-end" direction="row"> <Button variant="contained" className={classes.navbarBtn}> {b1} </Button> <Button variant="contained" className={classes.navbarBtn}> {b2} </Button> </Grid> </Toolbar></AppBar>;
1 回答
波斯汪
TA贡献1811条经验 获得超4个赞
Toolbar有display: flex。因此，其子级（Typography在Grid本例中）的宽度考虑了这一点。
现在，<Grid container/>它width: 100%占用了所有可用空间。
为了只为按钮容器提供所需的空间，
您可以将其分成 2 个网格 -
item和container。给
Typographyflex-grow: 1.
const useStyles = makeStyles(() => ({
h5: {
flexGrow: 1
}
}));
function App() {
const classes = useStyles();
return (
<AppBar position="fixed">
<Toolbar>
<Typography className={classes.h5} variant="h5">
Lorem Ipsum Lorem Ipsum
</Typography>
<Grid item>
<Grid container item justify="flex-end" direction="row">
<Button variant="contained">b1</Button>
<Button variant="contained">b2</Button>
</Grid>
</Grid>
</Toolbar>
</AppBar>
);
}
https://codesandbox.io/s/material-ui-appbar-flexbox-9x8l4
添加回答
举报
0/150
提交
取消