theme.spacing is not a function with @material-ui/[styles/core] 4.0.1

See original GitHub issue

Trying to fix another issue today I tried to reset my whole Material-UI 4.0.0 workspace, migrating both core and style to latest 4.0.1

As soon as I try to use a ThemeProvider I get TypeError theme.spacing is not a function.

This is not a v0.x issue.
I have searched the issues of this repository and believe that this is not a duplicate. Well… not exactly… I found a duplicate at https://github.com/mui-org/material-ui/issues/15834 but the fix seems not working, it’s like the bad usage is in the core

Expected Behavior 🤔

Just want to see the theming working. I’m confused by the fact that theme.spacing seems used by both master and next branches, so this seems the way to go.

Current Behavior 😯

See error above

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/materialui-style-issue-rk8n0

Context 🔦

I started a whole new application and I’m trying to clue together all of the style feature of Material-UI. That said, before the migration to 4.0.1 of style module I had not such issues, so I’m unsure if 4.x releases are someway unstable or what.

Your Environment 🌎

Tech	Version
Material-UI	v4.0.1
React	16.0.6
Browser	FF/Chrome latest
TypeScript	-

Issue Analytics

State:
Created 4 years ago
Comments:22 (12 by maintainers)

Top GitHub Comments

110reactions

ByronHsucommented, Jun 7, 2019

Sorry I found the problem. I change import { withStyles } from '@material-ui/styles'; to import { withStyles } from '@material-ui/core/styles'; and everything works fine. Thanks!

36reactions

x5enginecommented, Sep 2, 2019

go from marginRight: theme.spacing(1)

change it to marginRight: theme.spacing.unit