material UI datagrid 垂直滚动条答案

【问题标题】：material UI datagrid vertical scroll barmaterial UI datagrid 垂直滚动条
【发布时间】：2021-04-05 04:15:44
【问题描述】：

我想渲染一个没有任何垂直滚动条的材质 UI 数据网格。这是网格的代码：

return <div style={{height: 400, width: '100%', } }>
        <DataGrid className={classes.root} rows={closedPositions} columns={columns} rowHeight={20} 
headerHeight={25} disableSelectionOnClick pageSize={20} autoPageSize={true} scrollbarSize={1}
                  components={{
                      pagination: CustomPagination,
                  }}
        />

autopageSize 的文档是： If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.

因此我很困惑为什么我有一个滚动条。即使我将 div 设置为高度 10,000，表格中没有行，我仍然会得到一个滚动条。

此外，scrollbarSize 为 15 和 1 之间没有区别（对于我想要的水平滚动条）。

有人知道怎么回事吗？

【问题讨论】：

标签： reactjs material-ui react-material

【解决方案1】：

你试试下面的代码吗？

autoHeight={true}

这对我来说很好。

示例。

<div style={{ width: "100%" }}>
  <DataGrid
    rows={rows}
    columns={columns}
    autoHeight={true}
  />
</div>

【讨论】：

感谢您的回答！目前尚不清楚您希望 OP 在哪里插入您在答案中编写的代码，您能否编辑您的答案，以便更容易看到如何使用您建议的属性？我认为添加整个组件标签就足够了。
谢谢您的建议！我添加了整个组件标签。
它似乎拿走了滚动条，但我的网格不符合 400 像素的高度。它现在少了很多
web-tools2-6mmkzmlse.vercel.app/sample1 这是你的代码。这个页面有一个滚动条，但这是给浏览器的，不是给 DataGrid 的。