[Divider] not printing with Firefox

[laichak]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

While printing with Firefox, Divider is not showing. It works with Chrome. I am using react-to-print package for printing.

Follow up: Here is the code that produces the issue.

<Box sx={{ display: 'none', displayPrint: 'block' }}> <Divider / > < /Box>

Expected behavior 🤔

No response

Steps to reproduce 🕹

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[michaldudak]

I wasn't able to reproduce the issue. The https://mui.com/material-ui/react-divider printed (to PDF) just fine on both Edge and Firefox. Note that the Divider in its simplest form is just an <hr />. Try checking if plain hr tag prints fine on your setup.

[laichak]

Follow up: Here is the code that produces the issue.

<Box sx={{ display: 'none', displayPrint: 'block' }}> <Divider / > < /Box>

[MonstraG]

displayPrint doesn't seem to be an actual css property.

What you want is

@media print {
    display: block;
}

[michaldudak]

@MonstraG it's not a CSS property. It's available in the sx prop: https://mui.com/system/display/#display-in-print

@laichak I'm still not able to reproduce your issue. I've tried both on Windows and Mac using a real printer and a PDF one. The divider shows up. It may be related to your setup.

[laichak]

Yeah, it is weird. My workaround is explicitly set the height to 1px.

const Divider = () => ( <div style={{ height: '1px', borderTop: '1px solid #C5CAE9' }} /> );

[michaldudak]

I'm going to close this since it's not reproducible on our side and we haven't seen any other reports from the community about this issue.