如何更改材料表中的水平滚动条宽度？答案

【问题标题】：How to change horizontal scroll bar width in Material Table?如何更改材料表中的水平滚动条宽度？
【发布时间】：2020-05-30 11:55:32
【问题描述】：

Material-Table的水平滚动条的粗细可以改变吗？我尝试将scrollBarWidth 属性和scrollPadding 属性添加到表格组件中的style 属性，但没有成功。是否可以完全改变宽度？

【问题讨论】：

Mike K 你找到解决方案了吗？请分享。
@Delta 是的，但实际上不是：stackoverflow.com/a/63407496/2891356

标签： reactjs material-table

【解决方案1】：

您可以通过检查元素对其进行修改，并找到特定的类

示例

通过将 css 放入您的材料表类的元素中；您会在不重新加载页面的情况下尽早看到结果。

如果您将其放入代码中，请使用 :host ::ng-deep 来反映您的更改。

例子

:host ::ng-deep .mat-menu-panel {
    min-width: 112px;
    max-width: 400px;
    overflow: auto;
 }

【讨论】：

【解决方案2】：

这不是对我最初问题的直接回答，但我设法通过覆盖页面上所有滚动条的样式来设置水平滚动条的宽度。

无论如何，看起来像这样，

::-webkit-scrollbar {
  width: 20px; /* <-- This sets the thickness of the VERTICAL scrollbar */
  height: 20px; /* <-- This sets the thickness of the HORIZONTAL scrollbar */
}

我应该注意，这在 Firefox 或 IE/Edge 中不起作用。

【讨论】：

【解决方案3】：

将此 css 添加到包装我的 MaterialTable 的 div 中删除了预设滚动条，并将其替换为样式滚动条。

* {
overflow-y: clip !important;
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
}

}

【讨论】：