1 回答

TA貢獻1811條經驗 獲得超4個贊
Toolbar
有display: flex
。因此,其子級(Typography
在Grid
本例中)的寬度考慮了這一點。
現在,<Grid container/>
它width: 100%
占用了所有可用空間。
為了只為按鈕容器提供所需的空間,
您可以將其分成 2 個網格 -
item
和container
。給
Typography
flex-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
添加回答
舉報