preview is disorder ,caused by Css in js ?

[sytpb]

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 (
    <>
    <div className={classes.root} id="print-div">
        <div className={classes.lineDiv12}>
            <div className={classes.logo_div}><img className={classes.logo} src={sflogo}/></div>
            <div className={classes.procode_div}>标快</div>
        </div>
        <div className={classes.lineDiv4}>
            <div className={classes.print_div}>打印次数:1 打印时间2021-09-25</div>
        </div>
        <div className={classes.lineDiv17}>
            <svg  id="barcode" className={classes.barcode}></svg>
        </div>
        <div className={classes.lineDiv5}>
            <div  className={classes.waybill_div}>SF132413241324131324</div>
        </div>
        <div className={classes.lineBorder1}>
            <div className={classes.lineDiv9}>
                <Typography align="center" className={classes.destRouteLabel}>7755WD-755BF</Typography>
            </div>
            ....................
    <div>
        <button onClick={()=>printJS({printable:'print-div',type:'html',scanStyles: false})}>
            Print Form
        </button>
    </div>
    </>
    );

}

UI is material ,what 's the root cause ?