preview is disorder ,caused by Css in js ?

web page

print view page

```
const useStyles = makeStyles((theme) => ({
root: {
margin: '0px',
width: '100mm',
height: '150mm'
},
lineBorder1: {
border: '0.5px solid',
borderBottom: '0px',
},
lineBorder2: {
border: '0.5px solid',
},
lineDiv12: {
display: 'flex',
height: '12mm',
},
lineDiv4: {
display: 'flex',
height: '4mm',
},
lineDiv17: {
display: 'flex',
height: '17mm',
padding: 0,
//border: '0.5px solid',
},
lineDiv5: {
display: 'flex',
height: '5mm',
//border: '0.5px solid',
},
lineDiv9: {
display: 'flex',
height: '9mm',
},
lineDiv17a: {
display: 'flex',
height: '17mm',
},
lineDiv26: {
display: 'flex',
height: '26mm',
},
lineDiv11: {
display: 'flex',
height: '11mm',
},
lineDiv24: {
display: 'flex',
height: '24mm',
},
lineDiv25: {
display: 'flex',
height: '25mm',
},
logo_div: {
width: '100%',
//border: '0.5px solid',
height: '100%',
textAlign: 'left',
},
logo: {
margin: '5px',
width: '20mm',
height: '90%'
},
procode_div: {
width: '100%',
//border: '0.5px solid',
height: '9%',
textAlign: 'right',
fontSize: '26pt'
},
print_div: {
width: '100%',

textAlign: 'center',
fontSize: '9pt'
},
.......
}));

export default function Waybill50() {
const classes = useStyles();

useEffect(() => {
genBarCode();
return () => {

};
}, []);

const genBarCode = () => {

return JsBarcode('#barcode', "7444435815272",{
width:2.6,
height:60,
displayValue: false,
marginLeft: 1,
marginTop: 1,
marginBottom: -2,
marginRight: 0,

});
};

return (
<>

标快

打印次数:1 打印时间2021-09-25

SF132413241324131324

7755WD-755BF

....................

printJS({printable:'print-div',type:'html',scanStyles: false})}>
Print Form

);

}

```

UI is material ,what 's the root cause ?