Is it possible to modify the styles of an HTML element with the class name "react-pdf__Page"?

[dikum98]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

Hi I'm trying to change a page background color the parent node of canvas. It is div that class name is "react-df__Page" in dev tools.

I've tried two ways for changing the background color

1. modifying css attribute in index.css like below
   .react-pdf__Page { background-color: antiquewhite; }

2. attempting tailwind css style with modifying className attribute of Page component
   <Page pageIndex={i} className="flex flex-col items-center bg-[#f4f5fa] dark:bg-slate-800" renderTextLayer={false} renderAnnotationLayer={false} key={page_${i + 1}} />

I tried both methods, but neither of them resolved the issue. How can I change the background color? I want change that white spaces below like other navy color sides

" not changing canvasBackground itself "
" without using !important "

Steps to reproduce

try to change style

Expected behavior

backgorund color changing

Actual behavior

no response

Additional information

No response

Environment

• Browser (if applicable): Chrome ≥92
• React-PDF version: ^7.1.3
• React version: ^18.2.0
• Webpack version (if applicable): CRA

[wojtekmaj]

Without changing canvasBackground? I don't think that would be possible. Canvas works similarly to an image. White background won't magically become opaque. That's why canvasBackground prop exists. :)

[smisyuk4]

it is also interesting how to do it