如何缩减Material-UI组件间距？降低AppBar高度至少10px的方法

嘿，我完全懂你遇到的困扰——Material-UI的AppBar默认样式确实占了不少空间，尤其是那默认的24px内边距，自定义样式一不小心就会叠加而不是覆盖。别担心，下面几个简单的方法就能帮你把高度降下来：

方法一：用sx属性局部覆盖样式 #

这是最直接的方式，针对单个AppBar组件调整，不用全局修改。核心是要同时调整AppBar和内部Toolbar的最小高度，并且明确覆盖默认内边距（而不是叠加）：

import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

function CompactAppBar() {
  return (
    <AppBar 
      sx={{ 
        minHeight: '54px', // 桌面端默认是64px，这里刚好降了10px
        padding: '0 16px' // 直接覆盖默认的24px左右内边距，可按需调整
      }}
    >
      <Toolbar sx={{ minHeight: '54px' }}> {/* Toolbar默认minHeight也是64px，必须同步调整才会生效 */}
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          你的应用标题
        </Typography>
        {/* 这里放你的导航按钮、菜单等元素 */}
      </Toolbar>
    </AppBar>
  );
}

为啥要同时改Toolbar？因为AppBar的高度其实是被内部的Toolbar撑起来的，只改AppBar的话，Toolbar的默认高度还是会把AppBar顶回原来的尺寸。

方法二：通过自定义主题全局修改 #

如果希望所有AppBar都用紧凑样式，可以通过MUI的主题系统全局覆盖默认配置：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

// 创建自定义主题
const compactTheme = createTheme({
  components: {
    MuiAppBar: {
      styleOverrides: {
        root: {
          minHeight: '54px',
          padding: '0 16px',
        },
      },
    },
    MuiToolbar: {
      styleOverrides: {
        root: {
          minHeight: '54px',
        },
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={compactTheme}>
      <AppBar>
        <Toolbar>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            全局紧凑AppBar
          </Typography>
        </Toolbar>
      </AppBar>
      {/* 应用其他内容 */}
    </ThemeProvider>
  );
}

关键注意事项 #

• 避免样式叠加：不要只添加padding值，而是明确设置你需要的数值（比如padding: '0 16px'），这样就能彻底覆盖MUI默认的24px内边距，而不是在它基础上叠加。
• 微调内容间距：如果AppBar内的元素显得拥挤，可以适当调整内边距或者元素之间的间距，保证视觉舒适度。
• 固定定位适配：如果你的AppBar用了position="fixed"，记得给页面主体内容加上对应的margin-top（比如margin-top: 54px），避免内容被AppBar遮挡。

内容的提问来源于stack exchange，提问作者uma mahesh