Material-ui: [system] Component issue displayPrint

[jdboni]

Hello,

I found an issue with the component Box.
the displayPrint attribute looks not working once you try to make it dynamic.
is there another way to make it works ??

<Box displayPrint={hidden ? 'none' : 'block'}> 
  Should hide the block in print mode once hidden is true
</Box> 

looks like only the first value given is taken into account.

Chrome: Version 74.0.3729.169 (Official Build) (64-bit)

[oliviertassinari]

@jdboni Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

[jdboni]

Hi @oliviertassinari here you can find an example:

https://codesandbox.io/s/create-react-app-bk7yk

Normally if you click on the button "Hide" and after "print" you should not see the Box.

Regards,
JD

[oliviertassinari]

@jdboni Thank you. I can confirm the bug. It seems to be an issue at the JSS level, it works with styled-components:

-import Box from "@material-ui/core/Box";
+import styled from 'styled-components';
+import { display } from '@material-ui/system';

+const Box = styled('div')`${display}`;

[jdboni]

Nice! indeed I confirm that it is working with this patch!
Thanks!

[oliviertassinari]

I have created a related issue: https://github.com/cssinjs/jss/issues/1118.

[oliviertassinari]

Fixed in v5.0.0-alpha.13 https://codesandbox.io/s/create-react-app-forked-vjppu?file=/src/App.js