如何使用 react-to-print 正确打印嵌套组件

FormDataPrint.jsx:

import React, { forwardRef } from "react";
import { Card } from "reactstrap";

const FormDataPrint = forwardRef((props, ref) => {
  const { data } = props;

  const divStyle = {
    color: "blue", // Example color change
    padding: "10px", // Example padding
    margin: "5px", // Example margin
  };

  return (
    <Card style={divStyle} ref={ref}>
      <p>Name: {data.name}</p>
      <p>Surname: {data.surname}</p>
    </Card>
  );
});

export default FormDataPrint;

FormData.jsx:

import { Fragment, useRef } from "react";
import FormDataPrint from "../Printer/FormDataPrint";
import ReactToPrint from "react-to-print";
import { Card, Button } from "reactstrap";
import { Printer } from "react-feather";

const FormData = ({ data }) => {
  const formDataPrintRef = useRef();

  const handlePrint = () => {
    const formDataPrint = formDataPrintRef.current;
    if (formDataPrint) {
      formDataPrint.handlePrint();
    }
  };

  return (
    <Fragment>
      {/* This is Form Area (Input etc.) */}
      <Card>
        <div className="d-flex justify-content-end mt-1">
          <ReactToPrint
            trigger={() => (
              <Button
                className="ms-1 text-center"
                outline
                color="primary"
                onClick={handlePrint}
              >
                <Printer style={{ marginRight: "5px" }} size={20} />
                <span>Print</span>
              </Button>
            )}
            content={() => formDataPrintRef.current}
          />
          <div style={{ display: "none" }}>
            <FormDataPrint ref={formDataPrintRef} data={data} />
          </div>
        </div>
      </Card>
    </Fragment>
  );
};

export default FormData;

现在，在这个修改后的组件中，我已使用对象将样式直接应用于组件。您可以根据需要自定义这些样式。FormDataPrintCarddivStyle