我尝试只在一个页面（组件）上隐藏垂直滚动条。我使用"react": "^18.2.0"和"@mui/material": "5.10.4"（MUI v5）。
我尝试的最后一件事是设置父div的样式-为此我直接使用了Box组件，它没有做任何事情：

return (
    <Box 
    component="div"
    sx={{
        overflowX: "hidden",
        overflowY:"auto",
        '&::-webkit-scrollbar': {
            display: "none"
        }
    }}>
        ... content ...
    </Box>
)

类似地，这也不起作用（根据此处的解决方案：Customize ::-webkit-scrollbar inline with React）：

<div style={{ '&::WebkitScrollbar': { width: 0, height: 0 } }}></div>

在我尝试按照此解决方案中的建议添加.css之前：How to hide scroll bar in react app with allowing scrolling
但这也没有做什么：

return (
    <div className="container">
        ... content ...
    </div>
)

唯一有效的方法是在. css文件中添加一个全局属性，但这会隐藏每个页面上的滚动条，而且在firefox上也不起作用。
多谢了!