React - 如何从另一个组件调用 ThemeProvider

Question

i have a function in my App.js to change theme (light/dark mode):

import { createTheme, ThemeProvider } from '@mui/material/styles'
import Button from '@mui/material/Button'
import Header from './components/Header'
import About from './pages/About'
import Imoveis from './pages/Imoveis'
import Contact from './pages/Contact'
import Home from './pages/Home'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { CssBaseline } from '@mui/material'
import { useState } from 'react'
function App() {
    const light = {
        palette: {
            mode: 'light',
        },
    }

    const dark = {
        palette: {
            mode: 'dark',
        },
    }

    const [isDarkTheme, setIsDarkTheme] = useState(false)

    changeTheme = () => {
        setIsDarkTheme(!isDarkTheme)
    }

    return (
        <ThemeProvider
            theme={isDarkTheme ? createTheme(dark) : createTheme(light)}
        >
            <div className="App">
                <BrowserRouter>
                    <CssBaseline />
                    <Header></Header>
                    <Routes>
                        <Route path="/" element={<Home />} />
                        <Route path="/about" element={<About />} />
                        <Route path="/contact" element={<Contact />} />
                        <Route path="/imoveis" element={<Imoveis />} />
                    </Routes>
                </BrowserRouter>
            </div>
        </ThemeProvider>
    )
}

export default App  

I need to put a switch button in the header.jsx component, which calls this function when it is changed, basically i want to change the mode theme (dark/light).

can someone help me? idk how to call the function in the header component.

import AppBar from '@mui/material/AppBar'
import Toolbar from '@mui/material/Toolbar'
import Typography from '@mui/material/Typography'
import Container from '@mui/material/Container'
import { Link } from 'react-router-dom'
import { Tabs, Tab, useTheme, useMediaQuery } from '@mui/material'
import HouseIcon from '@mui/icons-material/House'
import DrawerComp from './DrawerComp'
import { Switch } from '@mui/material'

const ResponsiveAppBar = () => {
    const [value, setValue] = useState(0)
    const theme = useTheme()
    const isMatch = useMediaQuery(theme.breakpoints.down('md'))

    return (
        <AppBar position="static" sx={{ background: '#91060b' }}>
            <Container maxWidth="xl">
                <Toolbar>
                    <HouseIcon sx={{ transform: 'scale(2)' }} />
                    {isMatch ? (
                        <>
                            <Typography
                                sx={{
                                    fontSize: '2rem',
                                    paddingLeft: '10%',
                                    fontWeight: 'bold',
                                }}
                            >
                                NossoLar
                            </Typography>
                            <DrawerComp />
                        </>
                    ) : (
                        <>
                            <Tabs
                                sx={{ marginLeft: 'auto' }}
                                indicatorColor="secondary"
                                textColor="inherit"
                                value={value}
                                onChange={(e, value) => setValue(value)}
                            >
                                <Tab label="Home" component={Link} to="/" />
                                <Tab
                                    label="Imoveis"
                                    component={Link}
                                    to="/imoveis"
                                />
                                <Tab
                                    label="Sobre"
                                    component={Link}
                                    to="/about"
                                />
                                <Tab
                                    label="Contato"
                                    component={Link}
                                    to="contact"
                                />
                            </Tabs>
                        </>
                    )}
                    <Switch checked={isDarkTheme} onChange={changeTheme} />
                </Toolbar>
            </Container>
        </AppBar>
    )
}
export default ResponsiveAppBar 

PS: Sorry for my bad engilish people:(

Answer 1

You can use the state on Header component

<Header setIsDarkTheme={setIsDarkTheme}></Header>

Then create a button on Header component that does setIsDarkTheme(prev => !prev) when onClick