Failed to execute 'px' on 'CSS': The provided double value is non finite.

[SStoliarchuk]

There is an error with inline padding/margin props passed to when we pass {undefined} as value

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When we pass the value undefined/NaN inside the padding/margin prop of the component, it throws an error
"Failed to execute 'px' on CSS': The provided double value is non-finite"

Expected Behavior 🤔

It should just ignore the {undefined} value

Steps to Reproduce 🕹

https://codesandbox.io/s/material-ui-issue-forked-1943q?file=/src/Demo.js

Browser: ONLY in the latest chrome version (version 88)
Material-UI version: only in the @latest version, but not in @next

If you open the codesandbox, you can find specifically the issue is in the file
"jss-plugin-default-unit.esm.js"
line 5
var px = (0, $csb__jss.hasCSSTOMSupport) && CSS ? CSS.px : 'px';
in chrome 87 it evalues to 'px', meanwhile in chrome 88 it evalues to CSS.px, so it crashes when you pass undefined/NaN to CSS.px

Context 🔦

I think a lot of systems use @latest, and with chrome updates being automatic a lot of system could break if a value is passed conditionally. eg: <Box p={case ? 2 : undefined}/>

[bauwaerter]

See #24527

It is fixed and merged to master, however a new version has not been published yet. I'm currently trying to figure out how to get the change in my project without having to fork the repo.

[oliviertassinari]

I'm currently trying to figure out how to get the change in my project without having to fork the repo.

@bauwaerter https://github.com/mui-org/material-ui/blob/next/CONTRIBUTING.md#how-can-i-use-a-change-that-wasnt-released-yet

[oliviertassinari]

Duplicate of #24519.

[SStoliarchuk]

Duplicate of #24519.

yea i had this issue a couple of days ago and wanted to find the source of the problem before opening an issue, i checked for dupes at the time instead of now before publishing. my bad