我想在 Appbar 內制作一個完整高度的框，如下所示：
但是，默認情況下，Appbar 會從頂部、底部、左側和右側向內部元素提供填充，這會導致以下不良行為：
如果我設定 prop disableGutter，它只會禁用左右填充，但不會禁用頂部和底部的填充：
這很棒，但我現在只需要禁用頂部和底部的填充。
完整代碼：或單擊此處在沙盒中查看
import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
export default function Topnav() {
return (
<AppBar>
<Toolbar disableGutters>
<Typography sx={{ px: 1 }}>About</Typography>
<Typography sx={{ px: 1 }}>Settings</Typography>
<Typography sx={{ px: 1, flexGrow: 1 }}>Contact Us</Typography>
<Box sx={{ background: 'pink' }}>Mr bean</Box>
</Toolbar>
</AppBar>
);
}
uj5u.com熱心網友回復：
Use align-self: stretch
或者您可以將您的父 div 設定為alignItems: 'stretch'，但這會影響所有元素（如果這是您可能想要的）
import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
export default function Topnav() {
return (
<AppBar>
<Toolbar disableGutters>
<Typography sx={{ px: 1 }}>About</Typography>
<Typography sx={{ px: 1 }}>Settings</Typography>
<Typography sx={{ px: 1, flexGrow: 1 }}>Contact Us</Typography>
<Box sx={{ background: "pink", alignSelf: 'stretch'}}>
Mr bean
</Box>
</Toolbar>
</AppBar>
);
}
https://codesandbox.io/s/poliished-water-xr5hdc?file=/src/App.js
（我還在上面的操場上集中了“豆先生”）
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/477743.html
標籤：javascript css 反应 材料-ui