reactjs 在材质UI框标记中隐藏不滚动滚动条

oalqel3c 于 2023-02-15 发布在 React

关注(0)|答案(1)|浏览(145)

<Box
            paddingX={4}
            mt={3}
            sx={{
              backgroundColor: "#fff",
              width: 600,
              height: 220,
              border: "1px solid #e1e1e1",
              overflow: 'auto',
              '&::-webkit-scrollbar': { display: 'none' }
            //   '&::-webkit-scrollbar': { width : 0 },
            }}
          >

这是一段代码，我尝试，但没有发生

我需要隐藏滚动条

reactjs

来源：https://stackoverflow.com/questions/71706872/hide-scroll-bar-not-scrolling-in-material-ui-box-tag

1条答案

按热度按时间

pvabu6sv1#

在我的例子中，我有一个MUI对话框组件，其中的对话框内容溢出：

其结果是在对话框中放置了滚动条。
最终覆盖了Dialog组件的sx属性，如下所示：

sx={{
            '& .MuiDialogContent-root::-webkit-scrollbar': { display: 'none' },
            '& .MuiDialogContent-root': {
                'msOverflowStyle': 'none',
                'scrollbarWidth': 'none',
            },
        }}

它通过CSS类将样式应用于对话框内容。
我涵盖了所有主要浏览器的用例，参考这里：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hide_scrollbar_keep_func
在您的特定示例中，我建议跟踪溢出发生的位置，然后从父组件应用此操作。
希望这有帮助：）

赞(0）回复(0）举报 2023-02-15

我来回答

reactjs 在材质UI框标记中隐藏不滚动滚动条

1条答案

相关问题

热门标签

最新问答