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

Question

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>
)

Answer 1

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>

Answer 2

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

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