Placing ThemeProvider at the root of app still causes theme/style errors

[papgeorge21]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

As per the migration from v4 to v5 guideline suggests, I placed ThemeProvider at the root of my app. I am NOT using any theme I'm getting the following errors:

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.

theme.spacing is not a function

Expected behavior 🤔

The app should render normally

Steps to reproduce 🕹

Here's an app skeleton similar to mine. I'm using React Router and Context, if it makes any difference:

// other imports
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import {
    ThemeProvider,
    createTheme,
    makeStyles,
} from "@material-ui/core/styles";

const theme = createTheme();
const MainContext = React.createContext({'empty': true});

function Layout(props) {
 const classes = useStyles();

// IMPORTANT NOTE
// Layout component is responsible for reading socket messages from backend
// and changing the current page as per the function below:

const pageUpdate = () =>{
// reads messages
 if (update["page"] === "index") {
                props.history.push("/");
            } else if (update["page"] === "login") {
               props.history.push("/login");
          } 
// etc
}

return(
   <div className={classes.container}>
        {props.children}
    </div>
)}

const ContextRoute = ({
    contextComponent,
    contextState,
    component,
    ...rest
}) => {
    const { Provider } = contextComponent;
    const Component = component;

    return (
        <Route {...rest}>
            <Provider value={contextState}>
                <Component />
            </Provider>
        </Route>
    );
};

const App = (props) => {
 return (
        <ThemeProvider theme={theme}>
            <Router>
                <MainContext.Provider value={state}>
                <Layout>
                        <Switch>
                            <ContextRoute
                                exact
                                path="/"
                                contextComponent={MainContext}
                                contextState={state}
                                component={Home}
                            />
                            <ContextRoute
                                exact
                                path="/routeA"
                                contextComponent={MainContext}
                                contextState={state}
                                component={ComponentA}
                            />
                          <ContextRoute
                                exact
                                path="/routeB"
                                contextComponent={MainContext}
                                contextState={state}
                                component={ComponentB}
                            />
                      </Switch>
                    </Layout>

                </MainContext.Provider>
            </Router>
        </ThemeProvider>
}

### Context 🔦

Does the use of context any play role?
Also, since I'm not using a theme, did I place ThemeProvider at the right place? I tried several other places to put it, like after <Layout> or <Switch>, make it part of <Layout> or <ContextRoute>. I even tried placing it inside the components that crash, e.g. inside ComponentB. 

As a last resort I even tried wrapping my <App> on index.js:
ReactDOM.render(<ThemeProvider theme={theme}<App /></ThemeProvider>, document.getElementById("root"));

The errors persists. 

The problem, as I'm understanding it, is that the <ThemeProvider> should be placed at the outer component, which I am doing. 

Note that there is no use of useStyles inside app but only in the components that it renders (componentA, componentB, Home etc)

### Your environment 🌎

  System:
    OS: macOS 11.6.2
  Binaries:
    Node: 12.22.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.12 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Edge: Not Found
    Firefox: 95.0.2
    Safari: 15.2

[siriwatknp]

From what you described, I am pretty sure that it is not a bug in MUI. If you could post a link to your repository, I am happy to take a look.

[hbjORbj]

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

[papgeorge21]

I'll close it, fixed the issue.

[gregorysl]

Could you share what fixed your issue?

[charisra]

I believe adding this to the root folder did the trick:

`

...`