如何自定义TableContainer滚动条的宽度、颜色及圆角？

嘿，我来帮你搞定这个滚动条自定义的问题！你已经通过设置height: 600px让表格实现了滚动，接下来只需要借助CSS的滚动条伪元素，就能轻松修改它的颜色、宽度和圆角啦。

因为TableContainer的滚动条是浏览器原生的，我们可以通过::-webkit-scrollbar系列伪元素来定制（Chrome、Edge、Safari都支持），如果需要兼容Firefox，也有对应的属性可以设置。下面是修改后的完整代码示例：

<TableContainer 
  sx={{
    height: '600px',
    border: '1px solid #ffcccb',
    marginTop: '20px',
    width: '1100px',
    padding: '20px 10px 0', // 把分散的padding合并成更简洁的写法
    // 针对webkit内核浏览器的滚动条定制
    '&::-webkit-scrollbar': {
      width: '8px', // 调整滚动条宽度
    },
    '&::-webkit-scrollbar-track': {
      backgroundColor: '#f1f1f1', // 滚动条轨道背景色
      borderRadius: '4px', // 轨道圆角
    },
    '&::-webkit-scrollbar-thumb': {
      backgroundColor: '#888', // 滚动条滑块颜色
      borderRadius: '4px', // 滑块圆角
      // 鼠标悬停时的滑块样式
      '&:hover': {
        backgroundColor: '#555',
      }
    },
    // 兼容Firefox的滚动条设置
    scrollbarWidth: 'thin',
    scrollbarColor: '#888 #f1f1f1', // 格式：滑块颜色 轨道颜色
  }}
>
  <Table sx={{ minWidth: 650 }} aria-label="simple table">
    <TableHead>
      <TableRow>
        {header && header.map((item, index) => (
          <TableCell key={index}>{item}</TableCell>
        ))}
      </TableRow>
    </TableHead>
    {/* 记得补充TableBody的内容哦 */}
  </Table>
</TableContainer>

各部分样式说明： #

• 滚动条宽度：通过&::-webkit-scrollbar的width属性调整，Firefox则用scrollbarWidth: 'thin'
• 轨道样式：&::-webkit-scrollbar-track控制轨道的背景色和圆角，Firefox在scrollbarColor里设置轨道色
• 滑块样式：&::-webkit-scrollbar-thumb设置滑块的颜色、圆角，还可以加hover状态提升交互体验，Firefox在scrollbarColor里设置滑块色

你可以根据自己的需求调整颜色值、宽度和圆角大小，这样就能得到完全符合设计的滚动条啦！

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