材料-UI数据宽度问题

Question

可以使数据杂志仅成为行的宽度而不设置包含DIV宽度的行？

我尝试了

disableExtendRowFullWidth={true}

来提供帮助，但这只能行。包含的datagrid仍然很宽。
there是我当前的代码示例-https：//codesandbox.io/s/material-ui-i-sissue-forked-j720c？file =/src/demo.js

例如，您可以使用Makestyles强迫数据杂志的大小，甚至做更多很棒的事情，例如添加渐变颜色等。

const useStyles = makeStyles({

 dataGrid: {
    width: "640px"
  }
});

Answer 1

export default function Demo() {
  const classes = useStyles();
  return (
    <DataGrid
      autoHeight={true}
      disableExtendRowFullWidth={true}
      columns={columns}
      rows={rows}
      className={classes.dataGrid}
    />
  );
}

这将帮助您控制尺寸，无论牢记固定尺寸的牢记，因此不会响应迅速，例如使用％单元来实现某种灵活性。 希望帮忙！ 祝你好运！邦斯！ 为了娱乐而着色的版本：

const useStyles = makeStyles({
  dataGrid: {
    background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    borderRadius: 3,
    border: 0,
    color: "white",
    height: 48,
    padding: "0 30px",
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    width: "640px"
  }
});

彩色网格，固定宽度

sandbox：

https：//codesandbox.io/s/material-ui-sissue-forked-c0n6i？file =/src/demo.js：1304-1596

    //Im facing the same issue 
    //Now I fixed with using 


    //sx={{display: 'grid'}}

      <DataGrid
          rows={rows}
          sx={{display: 'grid'}}
          columns={columns}
          checkboxSelection
          onRowSelectionModelChange={(selectionModel) =>
            handleRowSelectionChange(selectionModel as GridRowId[]) 
            
          }
          slots={{
            toolbar: () => (
              <CustomToolbar
                exportToPDF={exportToPDF}
              />
            ),
            noRowsOverlay: NoRowsOverlay,
          }}
          disableRowSelectionOnClick
          density='compact'
          pagination
          paginationModel={paginationModel}
          rowCount={rowCount}
          paginationMode={paginationMode}
          pageSizeOptions={[5, 10, 20, 50]}
          onPaginationModelChange={handlePaginationModelChange}
        />