Блог

У меня есть компонент виджета чата из react-chat-widget. Его стили находятся в пакете node_modules. Однако стили не применяются к компоненту виджета чата в IFrame.Что я могу сделать, чтобы применить их?

Виджет.jsx:

 import { ChatWidget } from "react-chat-widget";
import "react-chat-widget/lib/styles.css";

const Widget = (props) => {
  return (
    <ChatWidget {...props}/>
  );
};
export default Widget;
 

фрейм:

 import React, { useState } from "react";
import { createPortal } from "react-dom";

const IFrame = ({
  children,
  ...props
}) => {
  const [contentRef, setContentRef] = useState(null);
  const mountNode = contentRef?.contentWindow?.document?.body;

  return (
    <iframe {...props} ref={setContentRef}>
      {mountNode amp;amp; createPortal(children, mountNode)}
    </iframe>
  );
};

export default IFrame;
 

компонент страницы:

 const ImitatePage = () => {
  const {pageRef, toggleWidgetShow, widget, handleNewUserMessage} = useWidget();
  return (
    <div>
      <div ref={pageRef}>
      </div>
          <ChatWidgetLauncher toggleWidgetShow={toggleWidgetShow}/>
          {
            widget ?
            <IFrame className="chat-widget-iframe">
              <Widget
                    className="chat-widget"
                    launcher={handleToggle => null}
                    handleNewUserMessage={handleNewUserMessage}
              />
            </IFrame>
            : null
          }
    </div>
  );
};