Why Material-UI is not recognizing the theme.spacing function?

Question

Description

I am trying to use Material-UI's theme.spacing function in a React application but the spacing function is not recognized.

The Javascript error message is: TypeError: theme.spacing is not a function

I am unsure if this is a bug or I have something wrong with the frameworks versions being installed.

---

Context

• Here's the Github issue raised to address this problem.
• Here's the repo with the offending code. The error is caught in the src\pages\index.js file, line 16: paddingTop: theme.spacing(20)
• Here's the sandboxed repo running where you can actually see the error message.

These are the frameworks versions being installed, according to the package-lock.json file:

• Material-UI: v3.9.2
• React: v16.8.1
• Chrome: v72.0.3626.96
• TypeScript: None
• create-react-app: v3.2.2

Answer 1

For material ui version 5.1.0 the following worked for me (as @Worm said)

• importing makestyles like this

import { makeStyles } from '@mui/styles';

remember to install @mui/styles

if you get a warning like

MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.
MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.

wrap parent container with ThemeProvider

export default ParentComponentName = (props)=>{
return(
   <ThemeProvider theme={theme}>
      <SomeThemeComponent>
        <SomeComponent />
      </SomeThemeComponent>
    <ThemeProvider>
)
}

Reference

https://mui.com/styles/api/#examples-4

PS: posted as new answer as I couldn't comment,because of credit limits.