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

Question

I创建了一个带有10列的MUI X数据网格。它在大屏幕上看起来很棒，但是当我将其挤出1380 PX以下时，我希望看到水平的条滚动，但看起来很糟糕。

我不想切换到另一个库，只需要解决此水平滚动问题即可。在文档中，它可以很好地工作。但是我使用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

，您需要删除它。