How to load Material UI Theme based on Redux Store entry - reactjs

Question

I have the below file as the first file that loads when my application loads. I want to pull the palette type from my Redux store like this.props.pageTheme so when I trigger a change to the theme, it takes place in the whole app. though when I enter type: this.props.pageTheme I get an error saying TypeError: Cannot read property 'props' of undefined.. Which would make sense because store is not generated by the time const kicks in. But .. Then, how can I read what's in the store and change on the page? I've seen solutions like creating multiple theme const and applying that based on this.props.getTheme within return of the app but that's so ugly way of doing it. Is there any smart way to handle theme value injection into the createMuiTheme?
import React, { Component } from "react";
import { MuiThemeProvider, createMuiTheme } from "#material-ui/core/styles";
const theme = createMuiTheme({
palette: {
type: "light",
}
});
class App extends Component {
render() {
return (
<MuiThemeProvider theme={theme}>
<>page content</>
</MuiThemeProvider>
);
}
}
}
function mapStateToProps(state) {
return {
pageTheme: state.Page.Theme
};
}
export default connect(
mapStateToProps
)(App);

Answer 1

So I am sure there will be people looking for an answer for this issue since it's sleek to offer users an ability to change the color mode of your app. My solution is below, if I come across any, I will update it.
In Redux Store I have:
const initialState = {
Page: {
Theme: "light"
},
};
In main App.js file I have
<MuiThemeProvider theme={theme(this.props.pageTheme)}>
as a wrapper around the content that I have on the page.
and I have the below function for theme
function theme(mode) {
return createMuiTheme({
palette: {
type: mode,
primary: {
light: "#757ce8",
main: "#3f50b5",
dark: "#002884",
contrastText: "#fff"
},
secondary: {
light: "#ff7961",
main: "#f44336",
dark: "#ba000d",
contrastText: "#000"
}
}
});
}
If you have any suggestions over this to get it better, still highly appreciated.