如何在MUI框架中隐藏页面滚动条？

全局隐藏页面滚动条 #

如果需要整个页面隐藏滚动条，可以通过自定义MUI主题覆盖全局样式，同时保证多浏览器兼容性：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          // 适配WebKit内核浏览器（Chrome、Edge、Safari）
          '&::-webkit-scrollbar': {
            display: 'none',
          },
          // 适配IE和旧版Edge
          '-ms-overflow-style': 'none',
          // 适配Firefox
          'scrollbar-width': 'none',
        },
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {/* 你的应用内容 */}
    </ThemeProvider>
  );
}

特定组件内隐藏滚动条 #

如果仅需在单个MUI组件（如Box、Paper）内隐藏滚动条，直接通过sx属性注入样式即可：

import Box from '@mui/material/Box';

function ScrollableContent() {
  return (
    <Box
      sx={{
        maxHeight: '500px',
        overflow: 'auto', // 内容超出时启用滚动
        // 隐藏滚动条样式
        '&::-webkit-scrollbar': { display: 'none' },
        '-ms-overflow-style': 'none',
        'scrollbar-width': 'none',
      }}
    >
      {/* 此处放置长内容 */}
    </Box>
  );
}

基于makeStyles的兼容写法（MUI v5可用） #

如果你仍在使用makeStyles工具，可按以下方式定义样式：

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
  scrollableContainer: {
    maxHeight: '400px',
    overflow: 'auto',
    '&::-webkit-scrollbar': { display: 'none' },
    '-ms-overflow-style': 'none',
    'scrollbar-width': 'none',
  },
});

function CustomScrollableComponent() {
  const classes = useStyles();
  return <div className={classes.scrollableContainer}>{/* 长内容 */}</div>;
}

关键注意点 #

• 所有方案仅隐藏滚动条，保留完整滚动功能，用户仍可通过鼠标滚轮、键盘操作滚动内容。
• 样式覆盖了主流浏览器：WebKit内核浏览器、Firefox、IE/旧版Edge。

内容的提问来源于stack exchange，提问作者João Alejandro