react-to-print design issue when I use MUI Grids

user_13114349 0
Viewed 57

I am using Mui Grid components with dynamic md={6 or 12} in a loop while rendering. When I try to export my PDF, there is a design issue in the print window.

arry.map(item => 
  <Grid md={item.gridSize}>
    // somethig here...
  </Grid>
)
react-to-print grid pdf
3 Answers

Here I found the solution for this problem. react-to-print breaks design for grid system. One of the easy solution is to provide all the five breakpoints values like

  <Grid md={yourValue} xs={yourValue} sm={yourValue} lg={yourValue} xl= 
   {yourValue}
  >
    //something here...
  </Grid>
user_131143490

I solved this issue by properly giving all the breakpoints with proper values like md, xs, sm, lg, xl.

user_161436690

this will also fix the issue if you use xs only.

<Grid xs={yourValue}>
  //something
</Grid>
user_179780310
Related