如何为React Material-Table添加美观滚动条并仅作用于表格主体？

我来帮你搞定这个需求！你想要用美观的滚动条替代Material-Table的分页，而且只让滚动效果作用在表格主体上，之前用react-custom-scroll没达到预期，对吧？下面给你两种可行的方案，一步步来：

方案一：正确使用react-custom-scroll包裹表格主体 #

之前的问题是你把整个MaterialTable组件都包在了CustomScroll里，导致表头、工具栏也跟着滚动了。我们可以利用Material-Table的components属性，只给表格的主体容器套上CustomScroll：

1. 首先确保导入了需要的组件：

import CustomScroll from 'react-custom-scroll';
import MaterialTable from 'material-table';
import { TableContainer } from '@material-ui/core';

2. 然后在MaterialTable中自定义TableContainer组件：

<div style={{ height: "50vh" }}>
  <MaterialTable
    // 你的表格列、数据配置...
    options={{
      search: true,
      paging: false,
      toolbarButtonAlignment: "left",
      searchAutoFocus: true,
    }}
    components={{
      // 重写表格容器，只给主体套滚动组件
      TableContainer: (props) => (
        <CustomScroll heightRelativeToParent="100%">
          <TableContainer {...props} />
        </CustomScroll>
      )
    }}
  />
</div>

这样设置后，CustomScroll只会作用于表格的主体内容，表头会固定在顶部，不会跟着滚动，完美符合你的需求。

方案二：用CSS自定义滚动条（无额外依赖） #

如果你觉得第三方组件有点冗余，也可以直接用CSS自定义滚动条样式，更轻量且兼容性不错（除了IE）：

1. 添加自定义滚动条的CSS样式（可以放在全局样式文件或组件的style标签里）：

/* 针对Material-Table的表格主体容器 */
.MuiTableContainer-root::-webkit-scrollbar {
  width: 8px; /* 垂直滚动条宽度 */
  height: 8px; /* 水平滚动条高度 */
}

/* 滚动条轨道样式 */
.MuiTableContainer-root::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 4px;
}

/* 滚动条滑块样式 */
.MuiTableContainer-root::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  border-radius: 4px;
}

/* 鼠标悬停时的滑块样式 */
.MuiTableContainer-root::-webkit-scrollbar-thumb:hover {
  background-color: #999999;
}

2. 然后给MaterialTable设置固定高度，确保表格主体能产生滚动：

<div style={{ height: "50vh" }}>
  <MaterialTable
    // 你的表格配置...
    options={{
      search: true,
      paging: false,
      toolbarButtonAlignment: "left",
      searchAutoFocus: true,
    }}
    components={{
      TableContainer: (props) => (
        // 计算主体高度，减去工具栏和表头的高度
        <TableContainer {...props} style={{ maxHeight: "calc(50vh - 70px)" }} />
      )
    }}
  />
</div>

关键注意点 #

• 一定要确保父容器或表格主体容器有明确的固定高度，否则滚动条不会生效
• 避免把整个MaterialTable包在滚动组件里，要精准定位到表格主体部分
• 如果用react-custom-scroll，注意它的heightRelativeToParent属性需要父容器有明确高度才能正确计算

内容的提问来源于stack exchange，提问作者DevLoverUmar