reaactToPrint无法与React Bootstrap模式一起使用

如何解决reaactToPrint无法与React Bootstrap模式一起使用

帮我两个月以来遇到这个问题 当我单击打印按钮时，我想打印一个react-bootstrap模式，该模式的布局变得异常我正在使用react到打印库 我的代码

infoWithModal(props) {
        const { to,staticContext,...rest } = this.props;
        return (
            <div >
               <Modal {...rest} aria-labelledby="contained-modal-title-vcenter" >
                    <Modal.Header closeButton>
                        <Modal.Title id="contained-modal-title-vcenter">
                        Using Grid in Modal
                        </Modal.Title>
                    </Modal.Header>
                    <Modal.Body className="show-grid"ref={el => (this.componentRef = el)}>
                        <Container>
                        <Row>
                            <Col xs={12} md={8}>
                            .col-xs-12 .col-md-8
                            </Col>
                            <Col xs={6} md={4}>
                            .col-xs-6 .col-md-4
                            </Col>
                        </Row>

                        <Row>
                            <Col xs={6} md={4}>
                            .col-xs-6 .col-md-4
                            </Col>
                            <Col xs={6} md={4}>
                            .col-xs-6 .col-md-4
                            </Col>
                            <Col xs={6} md={4}>
                            .col-xs-6 .col-md-4
                            </Col>
                        </Row>
                        </Container>
                    </Modal.Body>
                    <Modal.Footer>
                    <Row>
                         <Col>
                         {/* <FontAwesome name="print"className="text-warning m-2" onClick={()=> window.print()}/> */}
                             <ReactToPrint
                            
                                // trigger={() => <a href="#"> print</a>}
                                trigger={() => <a href="#"> <FontAwesome name="print"className="text-warning m-2" /></a>}
                                content={() =>{
                                    console.log(this.componentRef)
                                    return this.componentRef
                                } }
                            />
                        </Col>
                        <Col>
                            <Button onClick={props.onHide}>Close</Button>
                        </Col>
                    </Row>
                    </Modal.Footer>
                    </Modal>
            </div>
        );
    }

打印前

打印后

我想像打印图像之前一样打印，但是它不起作用