Как динамически добавлять таблицы стилей / стили в окно iframe в React

Question

У меня есть компонент React, и при запуске метода onClick он использует запросы DOM для добавления содержимого div в iframe.Функция .print () затем запускается в iframe.Хотя я могу успешно запустить этот процесс, я ничего не сделал для успешного добавления таблицы стилей или атрибутов стиля во вновь созданное окно печати.

Я попытался добавить в заголовок документа ссылку на таблицу стилей './App.css'.Я также попытался добавить к голове стили в блоке.В обоих случаях стили будут добавляться к заголовку, но они не будут отражены в окне iframe .print ().

Как я могу успешно добавить стили к созданному iframe, который будет сохраняться в окне фрейма .print ()?Я уже пробовал существующие подходы к iframe в StackOverflow.

Метод, который я использую, где я пытаюсь это сделать, заключается в следующем:

  printContent = () => {
    var content = document.getElementById("divcontents");
    var pri = document.getElementById("ifmcontentstoprint").contentWindow;
    var head = pri.document.head;
    var style = document.createElement("style");
    style.innerHTML = `@media print and (color) { -webkit-print-color-adjust: exact; } h1 { color: teal }`
    head.appendChild(style); 
    pri.document.open();
    pri.document.write(content.innerHTML);
    pri.document.close();
    pri.focus();
    pri.print();
  }