Why is ThemeProvider generating this error? - reactjs

Question

So I am a bit new to react and I am trying to set up a toggled theme for my website.
These are the instructions I followed -"https://css-tricks.com/a-dark-mode-toggle-with-react-and-themeprovider/"
Note: My app is a react + NetCore app.
Whenever I use the ThemeProvider this is the error I get:
"Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem."
Here is my App.js code:
import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { ThemeProvider } from 'styled-components';
import { GlobalStyles } from './components/GlobalTheme'
import { LightTheme, DarkTheme } from './components/Themes';
export default class App extends Component {
displayName = App.name
render() {
return (
<ThemeProvider theme={DarkTheme}>
<div>
<GlobalStyles />
<Layout>
<Route exact path='/' component={Home} />
</Layout>
</div>
</ThemeProvider>
)}
}
Here is my package.json file:
{
"name": "NotePadApp",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^3.4.1",
"react": "17.0.2",
"react-redux": "^6.0.0",
"react-bootstrap": "^0.31.5",
"react-dom": "17.0.2",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "5.2.0",
"react-scripts": "1.0.17",
"rimraf": "^2.6.2"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Here is GlobalStyle:
//Global Themes
import { createGlobalStyle } from 'styled-components';
export const GlobalStyles = createGlobalStyle`
*,
*:: after,
*:: before {
box - sizing: border - box;
}
body {
background: ${({ theme }) => theme.bodyBackGroundColor} !important;
color: ${({ theme }) => theme.textColor} !important;
}
`;
Here is themes.js:
//Themes
export const DarkTheme = {
bodyBackGroundColor: '#222222',
textColor: '#ffffff',
}
export const LightTheme = {
bodyBackGroundColor: '#ffffff',
textColor: '#222222',
}
These are the suggestions given to me and I have looked into them as best as I could with no luck.
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app

Answer 1

The problem is that you are passing JSON in ThemeProvider's theme prop but you should pass createMuiTheme. So your code becomes:
import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { ThemeProvider, createMuiTheme } from '#material-ui/core/styles'; //<-- import createMuiTheme
import { GlobalStyles } from './components/GlobalTheme'
import { LightTheme, DarkTheme } from './components/Themes';
export default class App extends Component {
displayName = App.name
const theme = createMuiTheme(DarkTheme); //<-- here create mui theme calling createMuiTheme with DarkTheme JSON
render() {
return (
<ThemeProvider theme={theme}> //<-- pass theme to ThemeProvider
<div>
<GlobalStyles />
<Layout>
<Route exact path='/' component={Home} />
</Layout>
</div>
</ThemeProvider>
)}
}