Hola a todos, según el título, me gustaría, según la ruta, usar un proveedor de temas diferente, mi código se ve así:
const rootElement = document.getElementById('root'); ReactDOM.render( <ThemeProvider theme="MyThemes.default"> <CssBaseline /> <App />, elementoraíz, );
dónde
const myThemes= { default: createMuiTheme({ ...defaultTheme, ...typography, overrides: { ...muiCssBaseline, ...muiTableOverrides } }), myother_theme: createMuiTheme({ ...myOtherTheme, ...typography, overrides: { ...muiCssBaseline, ...muiTableOverrides } }),};
entonces, cuando estoy en una ruta en particular, quiero usar myother_theme
Estaba haciendo un componente contenedor para llamar a index.js así
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;pero para estar funcionando requiere que el usuario haga un refresco manual. ¿Alguna sugerencia?
La dependencia de la matriz en el gancho useEffect no se envía usando la ventana. Para esto, debe usar useLocation de react-router-dom.
Hago este ejemplo https://codesandbox.io/s/custom-theme-provider-mui-based-in-routes-tt1d4 para resolver este problema.
const location = useLocation(); const isMyLocation = location.pathname === "/MYlOCATION/PATH"; useEffect(() => { if (isMyLocation) { setTheme(MyThemes.myother_theme); } else { setTheme(MyThemes.default); } }, [location.pathname, isMyLocation]);Además, debe agregar el contexto del envoltorio BrowserRouter en la aplicación para escuchar los cambios en las rutas de estado.