[data grid] Print issue

[TEAGASC-DEV]

Steps to reproduce

Followed the instruction on MUI web site to include the following code into the component

import {
DataGridPro, GridToolbarContainer,
GridToolbarExport,
} from '@mui/x-data-grid-pro';

function CustomToolbar() {

return (
    <GridToolbarContainer>
        <GridToolbarExport />
    </GridToolbarContainer>
);

}

inside component
<DataGridPro
getRowId={(row) => row.id}
rows={filteredClients}
columns={columns}
getRowClassName={(params) => super-app-theme--${params.row.status} }
onCellDoubleClick={ handleDoubleClick }
autoHeight={true}
hideFooter={true}
sx={{
"& .super-app-theme--header":
{ backgroundColor: "rgba(234, 255, 238, 0.2)", },
"& .MuiDataGrid-cell:focus":
{ outline: "none", },
"& .MuiDataGrid-cell:focus-within":
{
outlineOffset: "0px",
outline: "none",
},
}}
slots={{
toolbar: CustomToolbar,
}}
/>

Please note screen shot below

When I clicked the Print button, I got error
useGridPrintExport.js:127 Uncaught TypeError: Cannot read properties of null (reading 'style')
at useGridPrintExport.js:127:1
at printWindow.onload (useGridPrintExport.js:256:1)
at Object.exportDataAsPrint (useGridPrintExport.js:265:1)

Current behavior

Got error
useGridPrintExport.js:127 Uncaught TypeError: Cannot read properties of null (reading 'style')
at useGridPrintExport.js:127:1
at printWindow.onload (useGridPrintExport.js:256:1)
at Object.exportDataAsPrint (useGridPrintExport.js:265:1)

Expected behavior

Print page show be displayed

Context

No response

Your environment

System:
OS: Windows 10 10.0.19045
Binaries:
Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
npm: 9.9.3 - S:\Repos\React\node_modules.bin\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (125.0.2535.67)
npmPackages:
@emotion/react: ^11.10.6 => 11.11.4
@emotion/styled: ^11.10.6 => 11.11.5
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.15.15
@mui/icons-material: ^5.11.0 => 5.15.15
@mui/material: ^5.11.12 => 5.15.15
@mui/private-theming: 5.15.14
@mui/styled-engine: 5.15.14
@mui/styled-engine-sc: ^5.11.11 => 5.14.12
@mui/styles: ^5.10.14 => 5.15.15
@mui/system: 5.15.15
@mui/types: 7.2.14
@mui/utils: 5.15.14
@mui/x-data-grid: ^6.0.1 => 6.19.11
@mui/x-data-grid-generator: ^6.0.1 => 6.19.11
@mui/x-data-grid-premium: 6.19.11
@mui/x-data-grid-pro: ^7.5.1 => 7.5.1
@mui/x-date-pickers: ^6.0.0 => 6.19.9
@mui/x-date-pickers-pro: ^7.5.1 => 7.5.1
@mui/x-license: ^7.2.1 => 7.2.1
@mui/x-license-pro: 6.10.2
@types/react: 18.3.0
react: ^18.0.0 => 18.3.0
react-dom: ^18.0.0 => 18.3.0
styled-components: ^5.3.8 => 5.3.11

Search keywords: DataGrid-Pro Print
Order ID: 91445

[michelengelen]

duplicate of #13015

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@TEAGASC-DEV: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.