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

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

CodePudding user response：

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

CodePudding user response：

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

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

CodePudding user response：

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>