import {usePrint,Print} from "@quarkunlimit/react-print" ;
import React from "react";
import { css } from "styled-components";
// weight 1
const normalCss = css`
  .a {
    font-size: 18px;
    color: red;
  }
`;

// weight 2
// [only support margin,orphans,widow and page breaks of the document](https://developer.mozilla.org/en-US/docs/Web/CSS/@page)
const pageCss = css`
  margin-top: 100px;
`;

// weight 3
const printCss = css`
  .a {
    color: blue;
  }
`;
export default () => {
  const [list, setList] = React.useState([1, 2]);


  const { printRef } = usePrint();
  const print = ()=>{
      printRef.current.print()
  }
  return (
    <div>
        <Print
          normalCss={normalCss}
          printCss={printCss}
          pageCss={pageCss}
          height={800}
          width={800}
          ref={printRef}
        >
          <>
            {list.map((item) => {
              return (
                <div className="a" key={item}>
                  {item}
                </div>
              );
            })}
          </>
        </NEPrint>

    </div>
  );
};