如何在React中切换主题？

Question

我正在尝试实现一个按钮来在明暗之间切换。我有一个文件批准器，看起来像这样。。

const theme = getTheme(true);
const AppRouter = () => {
   return (
          <MuiThemeProvider theme={theme}>
              <ThemeProvider theme={theme}>
                 ...
                 <Switch> *all my routes are here including AppRoot, which routes to components* </Switch>
          </MuiThemeProvider></ThemeProvider>
);
}

所以当我设置getTheme（true）时，它会触发黑暗主题，而getTheme（false）会触发光明主题。问题来了，我想在Switch中的一个组件中插入一个切换按钮，允许用户在这两个主题之间切换。本质上，组件将控制AppRouter的状态。可能吗？

你知道我从哪里开始吗？我正在使用react钩子和类型脚本。我试过各种方法，但都没有用。减速器能工作吗？

更新：

认可者。tsx

const [lightTheme, setLightTheme] = React.useState(true);
const theme = getTheme(lightTheme);
const AppRouter = () => {
   return (
          <MuiThemeProvider theme={theme}>
              <ThemeProvider theme={theme}>
                 ...
                 <Switch> 
                     <PrivateRoute path="..." component={AppRoot} render{()=> <PageTitle toggleTheme={() => toggleTheme}/>}
                 </Switch>
          </MuiThemeProvider></ThemeProvider>
);
}

PageTitle.tsx

interface PageTitleProps {
  ...
  toggleTheme?: () => void;
}

const PageTitle: React.FC<PageTitleProps> = ({ ... toggleTheme}) => {
  ...
  return ( 
  ... 
  {toggleTheme && <Button OnClick={() => toggleTheme()}>Change Theme</Button>
)}

我试过运行上面的代码，但是toggleTheme没有定义，所以按钮根本没有显示出来。toggleTheme必须是可选的。

Answer 1

在App路由器中创建一个本地状态，并将切换器传递给将切换主题的组件。

认可者。tsx：

 import React, { useState } from 'react';

 const AppRouter = () => {
 const [lightTheme, setLightTheme] = useState(true);
 const theme = getTheme(lightTheme);
 const toggleTheme = () => setLightTheme(!lightTheme);
 return (
      <MuiThemeProvider theme={theme}>
          <ThemeProvider theme={theme}>
             ...
             <Switch> 
               <Route path='your-path' render={(props) => 
                 <PageTitle toggleTheme={ toggleTheme } />} />
             </Switch>
       </MuiThemeProvider></ThemeProvider>
 );
 }

页面标题。tsx：

interface PageTitleProps {
  ...
  toggleTheme?: () => void;
}

const PageTitle: React.FC<PageTitleProps> = ({ ... toggleTheme}) => {
  ...
  return ( 
  ... 
  <button onClick={() => toggleTheme()}>Change Theme</button>
)}