windows 10 pro office 2019 pro office 365 pro windows 10 home windows 10 enterprise office 2019 home and business office 2016 pro windows 10 education visio 2019 microsoft project 2019 microsoft project 2016 visio professional 2016 windows server 2012 windows server 2016 windows server 2019 Betriebssysteme office software windows server https://softhier.com/ instagram takipçi instagram beğeni instagram görüntüleme instagram otomatik beğeni facebook beğeni facebook sayfa beğenisi facebook takipçi twitter takipçi twitter beğeni twitter retweet youtube izlenme youtube abone instagram

Change a MUI Theme from a nested component

Asked By: Anonymous

I have the following component structure:

App -> ThemeProvider -> MenuBar -> ThemeControls -> Switch and Autocomplete

I want to change to darkmode with the switch and change the primary-color with the Autocomplete.
To achieve this I added the following custom hook.

import {createMuiTheme} from "@material-ui/core";
import {useState} from "react";

/**
 *  Hook to change the theme
 *
 * @returns {Theme, () => setDarkMode}
 */
const useThemeBuilder = () => {    
   
    const [myTheme, setMyTheme] = useState({})

    console.log('myTheme:', myTheme);
    let theme = createMuiTheme(myTheme);
    console.log('theme:' , theme);

    return [theme, setMyTheme]
}

export default useThemeBuilder;

The hook takes a theme object to override the default object with createMuiTheme. The theme object and a callback to change the state of the hook are exposed!

Here is an example of how this object looks like:

{
    "palette": {
        "type": "light",
        "primary": {
            "50": "#ffebee",
            "100": "#ffcdd2",
            "200": "#ef9a9a",
            "300": "#e57373",
            "400": "#ef5350",
            "500": "#f44336",
            "600": "#e53935",
            "700": "#d32f2f",
            "800": "#c62828",
            "900": "#b71c1c",
            "A100": "#ff8a80",
            "A200": "#ff5252",
            "A400": "#ff1744",
            "A700": "#d50000"
        }
    }
}

My problem is now that the App.js does not rerender and thought does not inject the new theme.

This is my app.js

import './App.css';
import React from 'react';
import {BrowserRouter as Router, Route, Switch,} from "react-router-dom";
import {MyComponent} from "./components/MyComponent";
import {ThemeProvider, useTheme} from "@material-ui/core/styles";
import {MenuBar} from "./components/MenuBar";
import {MyButtons} from "./components/MyButtons";
import {Home} from "./components/Home";
import {MyForms} from "./components/MyForms";
import {MyHookedForm} from "./components/MyHookedForm";
import {MyCarousel} from "./components/MyCarousel";
import useThemeBuilder from "./components/theme/theme";
import {CssBaseline} from "@material-ui/core";


function App() {

    const [theme] = useThemeBuilder();
    console.log('theme from App:', theme)

    return (
        <Router>
            <ThemeProvider theme={theme}>
                <CssBaseline/>
                <MenuBar/>
                <Switch>
                    <Route path="/colors">
                        <MyComponent/>
                    </Route>
                    <Route path="/buttons">
                        <MyButtons/>
                    </Route>
                    <Route path="/forms">
                        <MyForms/>
                    </Route>
                    <Route path="/hook-forms">
                        <MyHookedForm/>
                    </Route>
                    <Route path="/carousel">
                        <MyCarousel/>
                    </Route>
                    <Route path="/">
                        <Home/>
                    </Route>
                </Switch>

            </ThemeProvider>
        </Router>
    );
}


export default App;

Solution

Answered By: Anonymous

What you need is a context. Since you are using useState each component that uses the hook has its own theme and setMyTheme variables. You should create a context provider that exports the setMyTheme function.

You can do something like this

import './App.css';
import React from 'react';
import {BrowserRouter as Router, Route, Switch,} from "react-router-dom";
import {MyComponent} from "./components/MyComponent";
import {ThemeProvider, useTheme} from "@material-ui/core/styles";
import {MenuBar} from "./components/MenuBar";
import {MyButtons} from "./components/MyButtons";
import {Home} from "./components/Home";
import {MyForms} from "./components/MyForms";
import {MyHookedForm} from "./components/MyHookedForm";
import {MyCarousel} from "./components/MyCarousel";
import useThemeBuilder from "./components/theme/theme";
import {CssBaseline} from "@material-ui/core";

const ThemeContext = React.createContext({theme:{}});
export const useMyTheme = ()=>React.useContext(ThemeContext);

function App() {

    const [theme,setMyTheme] = useState({});
    console.log('theme from App:', theme)

    return (
<ThemeContext.Provider value={{theme,setMyTheme}}>
        <Router>
            <ThemeProvider theme={theme}>
                <CssBaseline/>
                <MenuBar/>
                <Switch>
                    <Route path="/colors">
                        <MyComponent/>
                    </Route>
                    <Route path="/buttons">
                        <MyButtons/>
                    </Route>
                    <Route path="/forms">
                        <MyForms/>
                    </Route>
                    <Route path="/hook-forms">
                        <MyHookedForm/>
                    </Route>
                    <Route path="/carousel">
                        <MyCarousel/>
                    </Route>
                    <Route path="/">
                        <Home/>
                    </Route>
                </Switch>

            </ThemeProvider>
        </Router>
<ThemeContext.Provider>
    );
}


export default App;

and in the components you want to use it in you can do

const {theme,setMyTheme} = useMyTheme();

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno