Material-ui: index.js:1446 Warning: Expected spacing argument to be a number, got [object Object] console.<computed> @ index.js:1446

[ask2mahtab]

• [ ] This is not a v0.x issue.
• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Current Behavior 😯

Steps to Reproduce 🕹

Link:

1.
2.
3.
4.

Context 🔦

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.?.? |
| React | |
| Browser | |
| TypeScript | |
| etc. | |

[eps1lon]

@ask2mahtab 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!

[Randagio13]

Hi @ask2mahtab! I have had the same problem.
Please check your styles object in your components, because theme.spacing generate the warning.
Let me know!

[sabun123]

'Expected spacing argument to be a number, got [object Object]'
I was getting this too. Upgraded from Material UI 3.9.3 to 4.1.1.

The mistake was simple. In MUI v3, we could do:

theme.spacing.unit

Upgrading to 4.1.1, I removed the .unit to be:

theme.spacing

That was wrong though, and it was what was causing the warning. The correct change is to:

theme.spacing()

It's a small mistake, but hopefully this helps anyone else running into this issue.