MUI 数据网格水平滚动（响应能力）不起作用

Question

我创建了一个包含 10 列的数据网格表。它在大屏幕上看起来很棒，但当我将其压缩到 1380 像素以下时，我希望看到水平条滚动，但它看起来很糟糕。

我不想切换到另一个库，只需要解决这个水平滚动问题。在文档中，它运行完美。但我使用 renderCell 并且我认为这导致了问题。但还是没能解决。

这是它在大屏幕上的样子：

这是 1303 px 时的样子：

在移动设备尺寸上它可以滚动，但它被挤压很多并且看起来很糟糕：

我在堆栈上尝试了很多建议，但仍然找不到任何解决方案。 这是我设计的 DataGrid 道具：

    <DataGridStyled
    rows={getRowData()}
    autoHeight
    rowHeight={80}
    columns={columns}
    rowsPerPageOptions={[5, 10, 15, 30, 100]}
    pageSize={pageSize}
    onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
    checkboxSelection
    disableSelectionOnClick
    pagination
    scrollbarSize={50}
  />

这是第五列（我使用了 renderCell 也许是因为这个？）：

{
  field: 'bloodPressure',
  headerName: 'BP (mmHg)',
  headerAlign: 'center',
  align: 'center',
  type: 'string',
  flex: 1,
  editable: false,
  valueGetter: (params) =>
    params?.row?.bloodPressure?.lastSys === undefined
      ? null
      : params?.row?.bloodPressure?.lastSys,
  renderCell: (params) => {
    return (
      <Tooltip
        sx={{ cursor: 'pointer' }}
        followCursor
        title={
          params.row?.bloodPressure?.lastDate === undefined
            ? 'No measurement'
            : moment(params.row?.bloodPressure?.lastDate).fromNow()
        }
      >
        <Box
          display="flex"
          alignItems="center"
          justifyContent="center"
          width={'60%'}
          bgcolor={params.row?.bloodPressure?.riskColor}
          borderRadius={1}
          py={0.3}
        >
          <Typography variant="subtitle1" color="black">
            {params.row?.bloodPressure?.lastSys === undefined ||
            params.row?.bloodPressure?.lastDia === undefined
              ? '--'
              : `${params.row?.bloodPressure?.lastSys?.toFixed(
                  0
                )}/${params.row?.bloodPressure?.lastDia?.toFixed(0)}`}
          </Typography>
          <Typography
            variant="subtitle1"
            color="black"
            sx={{
              display: 'flex',
              alignItems: 'center'
            }}
          >
            {params.row?.bloodPressure?.lastSys === undefined &&
            params.row?.bloodPressure?.lastDia === undefined ? null : params
                .row?.bloodPressure?.lastSys +
                params.row?.bloodPressure?.lastDia >
              params.row?.bloodPressure?.previousSys +
                params.row?.bloodPressure?.previousDia ? (
              <ArrowUpwardIcon
                sx={{
                  fontSize: 14,
                  lineHeight: 1.75,
                  height: '100%'
                }}
              />
            ) : (
              <ArrowDownwardIcon
                sx={{
                  fontSize: 14,
                  lineHeight: 1.75,
                  height: '100%'
                }}
              />
            )}
          </Typography>
        </Box>
      </Tooltip>
    );
  }
},

Answer 1

这是因为

flex: 1

，你需要删除它。