有没有办法让 MUI 数据网格始终保持水平滚动条可见？

Question

我有一个启用了列虚拟化的 Datagrid 表。该表上始终有 > 25 列。带触控板；用户可以快速水平滚动，但是，如果没有触控板，我担心用户将无法访问其他列，因为滚动条仅在触发滚动后才会出现。

有没有办法让水平滚动条始终可见？我尝试在

overflow-x: scroll

和

MuiDataGrid-virtualScroller

上添加

MuiDataGrid-virtualScrollerContent

，但这不起作用。大家有解决办法吗

Answer 1

我像这样设置我的列 obj :

{
id:1,
field:"foo",
headerName:"foo",
minWidth:100,
}

它对我有用（删除

flex:1

并添加

minWidth

）

Answer 2

您可以使用 styled 实用程序在 MUI 中创建样式组件。

import { styled } from '@mui/material'

const StyledDataGrid = styled(DataGrid)(() => ({
  '& ::-webkit-scrollbar': {
    'border-top': '1px solid #e9e9ec',
    'height': '7px'
  },
  '& ::-webkit-scrollbar-thumb': {
    'border-radius': '15px',
    'background-color': '#6d6d6dc9',
  },
}))

如需进一步定制，您可以查看this文档。

Answer 3

我认为你可以尝试设置宽度绝对值：EX：width：250，而不是flex：1。 我认为它可以帮助你 .

{ 字段：“id”， headerName：“ID”，宽度：250}，