I am using Redux-toolkit and material-ui to build my react-app. On my index.js page, I have defined the theme then wrapped my App component with the ThemeProvider. My target is the have the theme provider to read the theme type (dark/light) from my redux toolkit store. So my problem is how to access the redux store on the index.js page. this is because I am not sure if I can use the useSelector hook on the index page. Below is my redux store and my index.js
/* eslint-disable react/jsx-filename-extension */
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { createTheme, ThemeProvider } from '@material-ui/core/styles';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import CssBaseline from '@material-ui/core/CssBaseline';
import App from './App/App';
import reportWebVitals from './reportWebVitals';
import { store, persistor } from './redux/reduxStore';
import swDev from './swDev';
const theme = createTheme({
palette: {
type: 'light',
primary: {
main: '#6C7FD8',
light: '#e7e9f8'
},
secondary: {
main: '#FFFFFF'
},
red: {
main: '#FF1744'
}
},
typography: {
h1: {
fontSize: '4rem'
},
h2: {
fontSize: '3rem'
},
h3: {
fontSize: '2rem'
},
h4: {
fontSize: '1.5rem'
},
h5: {
fontSize: '1.3rem'
},
h6: {
fontSize: '1rem'
},
button: {
textTransform: 'none'
}
}
});
const themeChange = () => {
theme.palette.type = 'light';
console.log(theme);
};
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<ThemeProvider theme={theme}>
<CssBaseline />
<App />
</ThemeProvider>
</PersistGate>
</Provider>,
document.getElementById('root')
);
reportWebVitals();
// Register the service worker
// swDev();