如何在 React 中切换主题？

Question

我正在尝试实现一个按钮来在明暗之间切换。我有一个看起来像这样的文件 AppRouter..

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 的状态。有可能吗？

知道我可以从哪里开始吗？我正在使用反应钩子和类型脚本。我尝试了各种方法都无济于事。减速器会起作用吗？

更新：

AppRouter.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

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

AppRouter.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>
 );
 }

PageTitle.tsx：

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

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