Tpyography用网格切入工具栏的第二行

Question

我正在创建一个Appbar，我希望标题(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>;

Answer 1

Toolbar具有display: flex。因此，其子代(在这种情况下为Typography和Grid(的宽度考虑到了这一点。

现在，<Grid container/>有width: 100%，所以它占用了所有可用空间。

为了只给按钮容器所需的空间，

• 您可以将其分为两个网格-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