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

Question

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

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

编辑

工作示例：

通缉行为

标签： cssreactjshtml-tablematerial-uiscrollbar

Answer 1

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

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