PrintProvider break my CSS

[desdamo]

hello,

i just want some informatiosn because when i put Printprovider and Print, all my CSS is dead, i read your documentation but i dont find something to fix it, do you have an idea? Thanks

import React, { useState, useEffect } from "react";
import ShoppingCartItem from '../../containers/ShoppingCartItem';
import { useDispatch } from 'react-redux';
import PrintProvider, { Print } from 'react-easy-print';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCreditCard } from '@fortawesome/free-solid-svg-icons'
import { faPrint } from '@fortawesome/free-solid-svg-icons'

const ShoppingCart = ({ cart }) => {
  const [totalPrice, setTotalPrice] = useState(0);
  const [totalItems, setTotalItems] = useState(0);
  const dispatch = useDispatch();

  useEffect(() => {
    let items = 0;
    let price = 0;

    cart.forEach((item) => {
      items += item.qty;
      price += item.qty * item.price;
    })
    setTotalItems(items);
    setTotalPrice(price);
  }, [cart, totalPrice, totalItems, setTotalPrice, setTotalItems]);

  return (
    <>
<PrintProvider loose="false"    >
<Print>

    <div className="bg-bgcart w-2/5  tracking-wider ">

      <div className="bg-white p-2 flex align-justify bg-cart rounded-lg m-4 text-gray-500">
        <div className="w-2/6 ">Produit</div>
        <div className="w-1/6">Prix</div>
        <div className="w-1/4">Quantité</div>
        <div className="w-1/6">Sous-total</div>
        <div className="w-1/6"></div>

      </div>

      {cart.map((item) => (
        <ShoppingCartItem
          key={item.id}
          item={item}
        />
      ))}
      <div className="bg-white flex flex-col bg-cart rounded-lg m4 h-64 m-auto items-center">

        <div className="flex flex-col justify-around bg-cart rounded-lg m-4 p-4 h-20 items-center w-full">
        <div className="flex justify-around bg-cart rounded-lg h-10 items-center w-full">
        <div className="flex text-center font-semibold text-blue-400">Total:</div>
          <div className="flex font-semibold text-blue-400">{totalPrice} € TTC </div>
          </div>
          <div className=" flex justify-around bg-cart rounded-lg h-10 items-center w-full">

          <div className="w-1/2 font-semibold text-green-500 flex justify-center">Dont TVA (20%):</div>
          <div className="w-1/2 flex justify-center font-semibold text-green-500 ">{(totalPrice)*(0.2)} € TTC </div>
        </div>
        </div>

        <div className="flex">({totalItems} Articles)</div>
        <div className="flex flex-col justify-items-center  w-full">

        <div className="w-5/6  my-4 flex m-auto justify-center">

          <button
            className="bg-blue-400 w-full text-white active:bg-pink-600 font-normal uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
            type="button"
            onClick={() => dispatch({ type: 'SEND_PAYMENT_TO_API' })}

          >
             <FontAwesomeIcon 
                icon={faCreditCard} 
                className="mx-4"
                />

            Valider Paiement
      </button>

        </div>
        <div className="w-5/6 flex m-auto justify-center">
        <button
            className="bg-white border-solid border-2    border-blue-400 w-full my-2 text-blue-400 font-normal uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
            type="button"
          >
             <FontAwesomeIcon 
                icon={faPrint} 
                className="mx-4"
                />

            Imprimer le Ticket
      </button>
        </div>

        </div>

    </div>
      </div >
      </Print>

      </PrintProvider>
</>
  )

}
export default ShoppingCart;