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

【问题标题】：Is there a way to hide scrollbar in Material UI Table sticky header?有没有办法在 Material UI Table 粘性标题中隐藏滚动条？
【发布时间】：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 上尝试您的代码，然后在此处发布，以便有人可以帮助您。
我添加了一个代码框示例。但是，它不会为问题添加任何内容，因为它与提供的链接中的代码相同。
与其在检查器中尝试，不如在沙箱中尝试

标签： css reactjs html-table material-ui scrollbar

【解决方案1】：

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

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

【讨论】：

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