How To apply style/stylesheet to an hidden Iframe I use to print a particular div in react

I have this issue when printing my article The heading is not bold as in my website, I am printing a particular div in react by using the following function

      function closePrint(this: any) {
    document.body.removeChild(this.__container__)
  }

  const handlePrint = () => {
    let content = document.getElementById(`${notice ? "notice" : "article"}:${id}`)
    let oHideFrame = document.createElement("iframe")

    oHideFrame.style.position = "fixed"
    oHideFrame.style.display = "block"
    oHideFrame.style.visibility= "hidden"
    oHideFrame.style.right = "0"
    oHideFrame.style.bottom = "0"
    oHideFrame.style.width = "0"
    oHideFrame.style.height = "0"
    oHideFrame.style.border = "0"
    document.body.appendChild(oHideFrame)
    // oHideFrame.onload = setPrint
    let pri = oHideFrame.contentWindow
    if (pri) {
      pri.document.open()
      if (content) {
        pri.document.write(content.innerHTML)
        pri.document.close()
        pri.onbeforeunload = closePrint
        pri.onafterprint = closePrint
        pri.focus()
        pri.print() 

      }
    }
  }

My Folder structure looks like this

├───api
├───components
│   ├───singleArticle
├───style
│   ├───components
│   └───pages
└───utils

How can I apply style or style sheet to my iframe so the div I am printing looks excatly the same as how it is displayed in my website. If this is not possible please provide an alternate solution a solution. Thank You

Edit 1: I heard react to print package is a good solution has anyone have experience with using it so when I print it also loads my CSS https://github.com/gregnb/react-to-print