React MUI v5：仅隐藏特定页面滚动条的问题

我明白你遇到的困扰——想在单个组件里隐藏滚动条，试了好几种写法都没效果，全局样式虽然能用但会影响所有页面，还不兼容Firefox。别担心，我来给你针对性解决这个问题，保证只作用于目标组件，同时覆盖主流浏览器。

核心问题分析 #

你之前的尝试没生效，主要有这几个原因：

1. 容器缺少固定/最大高度：如果容器高度随内容自动撑开，overflowY: auto不会触发滚动行为，滚动条样式自然不会生效。
2. 缺少Firefox兼容配置：WebKit的伪元素写法对Firefox无效，需要单独设置scrollbarWidth属性。
3. 内联style不支持伪元素：直接在div的style里写&::WebkitScrollbar行不通，只有CSS-in-JS方案（比如MUI的sx、styled）才支持这种嵌套选择器。

解决方案1：使用MUI Box组件的sx属性（推荐） #

这是最直接的方式，利用MUI的sx属性实现组件级内联样式，同时兼容所有主流浏览器：

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

export default function YourTargetComponent() {
  return (
    <Box
      component="div"
      sx={{
        // 必须设置高度，让容器有滚动空间
        height: '400px', 
        // 垂直内容超出时可滚动，同时隐藏滚动条
        overflowY: 'auto',
        // 隐藏水平滚动条（按需设置）
        overflowX: 'hidden',
        
        // WebKit浏览器（Chrome、Safari等）隐藏滚动条
        '&::-webkit-scrollbar': {
          display: 'none',
        },
        // Firefox隐藏滚动条
        scrollbarWidth: 'none',
        // IE/Edge隐藏滚动条（可选兼容）
        '-ms-overflow-style': 'none',
      }}
    >
      {/* 你的长内容 */}
      {Array.from({ length: 50 }).map((_, index) => (
        <div key={index} style={{ padding: '16px', borderBottom: '1px solid #eee' }}>
          内容项 {index + 1}
        </div>
      ))}
    </Box>
  );
}

解决方案2：使用MUI Styled组件（适合复用样式） #

如果需要在多个组件里复用这个隐藏滚动条的样式，可以用MUI的styled工具创建自定义组件：

import { styled } from '@mui/material/styles';

// 创建自定义滚动隐藏容器
const ScrollHiddenContainer = styled('div')(() => ({
  height: '400px',
  overflowY: 'auto',
  overflowX: 'hidden',
  '&::-webkit-scrollbar': {
    display: 'none',
  },
  scrollbarWidth: 'none',
  '-ms-overflow-style': 'none',
}));

export default function YourTargetComponent() {
  return (
    <ScrollHiddenContainer>
      {/* 你的长内容 */}
      {Array.from({ length: 50 }).map((_, index) => (
        <div key={index} style={{ padding: '16px', borderBottom: '1px solid #eee' }}>
          内容项 {index + 1}
        </div>
      ))}
    </ScrollHiddenContainer>
  );
}

补充：如果想用外部CSS文件 #

如果你更习惯用外部CSS，要确保选择器正确且样式完整：

/* 外部CSS文件 */
.target-container {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  /* Firefox兼容 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* WebKit浏览器兼容 */
.target-container::-webkit-scrollbar {
  display: none;
}

组件中引用：

return (
  <div className="target-container">
    {/* 你的长内容 */}
  </div>
);

关键注意事项 #

• 必须设置容器高度：没有高度的话，容器会被内容撑满，不会出现滚动，滚动条样式也就不会生效。可以根据需求用height、maxHeight或者结合响应式设置。
• 多浏览器兼容不能少：不要只写WebKit的伪元素，Firefox和IE/Edge需要单独配置。
• 仅作用于目标组件：以上所有方案都是组件级样式，只会影响当前容器，不会全局隐藏滚动条。

这样调整后，你的单个组件就能实现滚动但隐藏滚动条的效果，同时兼容Chrome、Firefox、Safari等主流浏览器啦。

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