从顶部和底部禁用 Appbar 填充

Question

我想在 Appbar 中制作一个占满高度的框，如下所示：

但是，默认情况下，Appbar 从顶部、底部、左侧和右侧向内部元素提供填充，这会导致以下不需要的行为：

如果我设置属性 disableGutter，它只会禁用左右填充，但不会禁用顶部和底部的填充：

这很好，但我现在只需要禁用顶部和底部的填充。

完整代码：Or Click Here To See It In Sandbox

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>
  );
}

Answer 1

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/polished-water-xr5hdc?file=/src/App.js

（我还在操场上方将“憨豆先生”居中）

从顶部和底部禁用 Appbar 填充

disable Appbar paddings from top and bottom

javascript

css

reactjs

material-ui