如何在材质表中更改水平滚动条的宽度？

Question

是否可以更改Material-Table的水平滚动条的厚度？我尝试将scrollBarWidth属性和scrollPadding属性添加到表组件中的style道具中，但是没有用。可以改变宽度吗？

Answer 1

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

示例

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

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

示例

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

Answer 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中不起作用。

Answer 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;
}

}