MUI X DataGrid自定义样式需求：覆盖模板预设样式实现目标布局

我使用的模板自带DataGrid预设样式类，会作用于模板内所有DataGrid组件。我需要通过@emotion/styled创建自定义样式的DataGrid组件，以实现目标布局，但当前渲染效果未达到预期。

依赖项：@emotion/styled

const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
  root: {
    '& .MuiDataGrid-renderingZone': {
      maxHeight: 'none !important',
    },
    '& .MuiDataGrid-cell': {
      lineHeight: 'unset !important',
      maxHeight: 'none !important',
    },
    '& .MuiDataGrid-root .MuiDataGrid-cell ': {
      maxHeight: 'none !important',
      minHeight: 'mpne !important' // 注：此处存在拼写错误，应为"none"
    },
    '& .MuiDataGrid-virtualScrollerRenderZone .MuiDataGrid-row ' : {
        maxHeight: 'none !important',
    }
  },
}));

<StyledDataGrid
  rows={(temp.length === count ? rows : temp)}
  columns={columns}
  pageSize={20}
  autoHeight
  rowHeight={465}
  getRowSpacing={getRowSpacing}
  disableSelectionOnClick
  getRowClassName={(params) => `super-app-theme--${params.row.qa_status} && ${params.row.pkg_status}`}
  components={{ Toolbar: GridToolbar }}
/>

内容的提问来源于stack exchange，提问作者Barry