React-to-print: Why are there css that don't appear when printed?

[putrairawan992]

this display in the browser :

this print view :

this code:

and SASS

help me thanks

[putrairawan992]

@MatthewHerbst

[MatthewHerbst]

Can you please ensure that you have the background graphics options turned on when you are in the print preview?

[ronmaple]

I have the same problem on Chrome -- with background graphics turned on

[MatthewHerbst]

What version of the library are you using @ronmaple ?

[ronmaple]

2.1.2

[MatthewHerbst]

@ronmaple any chance you could make a codesandbox please replicating the issue?

[ronmaple]

https://codesandbox.io/embed/compassionate-dew-txilb

I'm trying to center the QRCode component, and the p tag

[MatthewHerbst]

Thanks @ronmaple! I'll try and take a look tonight but may not be able to get to it until this weekend

[putrairawan992]

@MatthewHerbst hello helpme please

[MatthewHerbst]

@putrairawan992 can you please make a condesandbox with your code so I can see it live?

[MatthewHerbst]

@ronmaple your issue is that your text-align: center is on the App class but that class is on the parent of the component being printed, not on the component itself.

[putrairawan992]

https://codesandbox.io/embed/reverent-bas-whpw7 @MatthewHerbst

[ronmaple]

@MatthewHerbst Oh! I see, that fixes it. I didn't realise that the print view might have been different from the web view, in terms of how (I'm assuming) the library uses the component to render the view. Thanks!

[putrairawan992]

why can't the background color and image appear

[MatthewHerbst]

@putrairawan992 I don't see a difference between the codesandbox render and the print output. I'm on Chrome 74. What browser are you using?

[putrairawan992]

Os Macbook

[MatthewHerbst]

@putrairawan992 is there something in the screen shots I shared that is not being displayed?

[putrairawan992]

i dont show background

[putrairawan992]

[MatthewHerbst]

@putrairawan992 can you show me the options under "More settings"? On mine I can replicate what you see by turning "Background graphics" off. You need to turn that on.

[putrairawan992]

solved brother thanks