Apply custom css to IFrame document scrollbar

[hiren3897]

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

I want to apply custom css to the default scrollbar of the IFrame HTML document

Describe the solution you'd like A clear and concise description of what you want to happen.

It doesn't apply my css styling

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

@diegomura

Can we apply the styles by using innerRef to the HTMLIFrameElement

I want to apply custom css styles to the default scrollbars

can you tell me how I can acheive this please?

I already tried this

  const iframeRef = useRef() as React.MutableRefObject<HTMLIFrameElement>;

  useEffect(() => {
    if (iframeRef.current) {
      // Access the iframe content document
      const iframeDocument = iframeRef.current.contentDocument;
      if (iframeDocument) {
        console.log("yes");
        const style = document.createElement("style");
        style.textContent = `
          :hover::-webkit-scrollbar-thumb {
            visibility: visible;
          }
          iframe::-webkit-scrollbar {
            height: 0.5em;
            width: 0.5em;
          }
          ::-webkit-scrollbar-thumb {
            background-color: #4ed3b4;
            border-radius: 9999px;
            visibility: hidden;
          }
          ::-webkit-scrollbar-track {
            background-color: transparent;
            border-radius: 9999px;
          }
          `;
        iframeDocument.head.appendChild(style);
      }
    }
  }, []);

MY TSX

const Report = ({ responses }: IReportResponse) => {
const filteredAsistanceResponses = responses.filter(response => response.role === "assistant");

return (
  <PDFViewer innerRef={iframeRef} style={styles.pdf}>
    <PDF content={filteredAsistanceResponses[filteredAsistanceResponses.length - 1]?.content} />
  </PDFViewer>
);
};

But it doesnt work

Additional context Add any other context or screenshots about the feature request here.

[holospice18]

My hack was to use 'id' then 'getElelmentByID'... <PDFViewer id="PDFViewer" showToolbar={false}>