有没有办法在 Material UI Table 粘性标题中隐藏滚动条？

Posted 2023-03-06

【中文标题】有没有办法在 Material UI Table 粘性标题中隐藏滚动条？

【英文标题】：Is there a way to hide scrollbar in Material UI Table sticky header?

【发布时间】：2021-07-26 15:15:57

【问题描述】：

我在 React 项目中有一个带有固定标题的 Material-UI 表（参考：https://material-ui.com/components/tables/#fixed-header）。我想隐藏表格标题中的滚动条（与它重叠），同时仍然在表格正文中显示它。

我主要尝试更改TableContainer、Table、TableHead 和TableBody 组件中的overflow 属性，但效果不佳。搜索了一下，似乎可以将上述组件的display属性设置为block来解决这个问题。但是，这种方法只让我将滚动条从TableContainer 组件移动到Table 组件，并没有解决问题并弄乱了表格布局。

编辑

工作示例：

想要的行为

【问题讨论】：

没有你的代码很难帮你。请在 codepen 上尝试您的代码，然后在此处发布，以便有人可以帮助您。

我添加了一个代码框示例。但是，它不会为问题添加任何内容，因为它与提供的链接中的代码相同。

与其在检查器中尝试，不如在沙箱中尝试

【参考方案1】：

如果您使用材料 ui 中的makeStyles，例如您可以添加的示例：

const useStyles = makeStyles(
  root: 
    width: '100%',
  ,
container: 
    scrollbarWidth: "none" /* Firefox */,
    maxHeight: 440,
    "&::-webkit-scrollbar": 
      display: "none"
     /* Chrome */
  
);

【讨论】：

但是，使用这种方法，滚动条在表格主体中不可见。