Hey everyone, I have a question regarding changing the theme provider based on the route in my code snippet:
const rootElement = document.getElementById('root');
ReactDOM.render(
<ThemeProvider theme="MyThemes.default">
<CssBaseline />
<App />
, rootElement, );
Here is how the themes are set up:
const myThemes= {
default: createMuiTheme({ ...defaultTheme, ...typography, overrides: { ...muiCssBaseline,
...muiTableOverrides } }),
myother_theme: createMuiTheme({ ...myOtherTheme, ...typography, overrides: {
...muiCssBaseline, ...muiTableOverrides } }),
So basically, I want to switch to 'myother_theme' when a specific route is accessed.
I tried creating a wrapper component in index.js like this:
const ThemeProviderChange = ({ children }) => {
const [theme, setTheme] = useState(Themes.default);
const isMyLocation= window.location.pathname === "/MYlOCATION/PATH"?? true;
const url = window.location.pathname.split('/').pop();
useEffect(() => {
if (isMyLocation) {
setTheme(MyThemes.myother_theme);
} else {
setTheme(MyThemes.default);
}
}, [url]);
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};
export default ThemeProviderChange;
However, it seems that a manual refresh is required for it to work properly. Any suggestions on how to overcome this issue?