Javascript 如何在react material表上添加一个奇特的滚动条？

我正在使用并希望有一个像样的滚动条，而不是默认的分页。我已经试过了，但它没有按照我的意图工作。“我的应用”的默认滚动条已激活。还有一件事，我怎样才能在桌面上应用这种类型的滚动

import CustomScroll from 'react-custom-scroll';
.
.
.

<div style={{height:"50vh"}}>
  <CustomScroll heightRelativeToParent="100%">

    <MaterialTable
    .
    .
    options={{
          search: true,
          paging: false,
          toolbarButtonAlignment: "left",
          searchAutoFocus: true,
        }}
    .
    />
  </CustomScroll>  
</div>

从“react custom scroll”导入CustomScroll；
.
.
.

无需使用

自定义滚动

，您可以通过在如下选项中设置最小（

minBodyHeight

）和最大（

maxBodyHeight

）视口高度来完成此操作：

从“React”导入React；
从“物料表”导入MaterialTable，{MTableToolbar}；
从'@material ui/core'导入{Grid}；
导出默认函数App（）{
返回(
{
//这将允许您在保持搜索的同时使用自己的标题
常量属性={…属性}；
//隐藏默认标题
proposcopy.showTitle=false；
返回(
你自己的头衔
);
}
}}
/>
)
}

更新：

安装

将此代码保存到与test.css文件相同的目录中：

.App{
高度：800px；
}

然后按照下面的代码进行操作：

从“React”导入React；
从“物料表”导入MaterialTable，{MTableToolbar}；
从'@material ui/core'导入{Grid}；
从“react custom Scrollbars”导入{Scrollbars}；
导入“/test.css”；
const renderThumb=（{style，…props}）=>{
常量拇指样式={
边界半径：6，
背景颜色：“rgba（35,49,86,0.8）”
};
返回；
};
const CustomScrollbars=props=>(
);
导出默认函数App（）{
返回(
{
//这将允许您在保持搜索的同时使用自己的标题
常量属性={…属性}；
//隐藏默认标题
proposcopy.showTitle=false；
返回(
你自己的头衔
);
}
}}
/>
)
}

更新2

这是在表体上添加滚动条的另一种方法，因为您必须覆盖表体组件，如果这样做，则表体将与标题一起混乱。这就是为什么您还必须覆盖表头并进行一些样式设置。代码如下：

从“React”导入React；
从“物料表”导入MaterialTable，{MTableToolbar，MTableBody，MTableHeader}；
从'@material ui/core'导入{Grid}；
从“react custom Scrollbars”导入{Scrollbars}；
const renderThumb=（{style，…props}）=>{
常量拇指样式={
边界半径：6，
背景颜色：“rgba（35,49,86,0.8）”
};
返回；
};
const CustomScrollbars=props=>(
);
导出默认函数App（）{
返回(
{
//这将允许您在保持搜索的同时使用自己的标题
常量属性={…属性}；
//隐藏默认标题
proposcopy.showTitle=false；
返回(
你自己的头衔
);
},
正文：道具=>{
返回(
)
},
标题：道具=>(
)
}}
/>
)
}

好的，谢谢！这是非常有用的，但如果我想使用一个像slim scroll或react custom scroll这样的花式滚动条呢？默认的滚动有点无聊：）谢谢亲爱的！它几乎可以正常工作。现在，我试图使它在固定表头的表体上工作。没有，到目前为止，找到了一种使用react custom scrollbarsBuddy覆盖material table的默认滚动组件的方法！有两种可能！我要么是最懒散/头脑迟钝的开发人员，要么是材料表文档不清楚！也许前一种状态是正确的：pYes，伙计，有时候医生不会把事情全部弄清楚，：我们走：p