javascript - 有没有办法可以在我的 React 应用程序中使用两个不同的 ThemeProvider

Question

我需要使用两个不同的库@setproduct-ui并@pancakeswap/uikit为应用程序中的不同组件提供主题。我的App.js长相是这样的——

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; // HashRouter,
import 'bootstrap/dist/css/bootstrap.min.css';
import 'normalize.css/normalize.css';
import '@blueprintjs/core/lib/css/blueprint.css';

import './@setproduct-ui/styles/setproduct.css';
import './@setproduct-ui/demo/styles/demo.css';
import DemoAppStyle from './@setproduct-ui/demo/styles/style.module.css';
import './assets/styles/main.css';

/** APP */
import SideBar from './components/common/Sidebar';
import routes from './Routes';

import { ThemeContext } from './@setproduct-ui/core/ThemeContext';
import { SidebarStateContext } from './@setproduct-ui/demo/context/SidebarContext';
import { SidebarContainer } from './@setproduct-ui/demo/components/SidebarContainer';
import { CustomScrollbar } from './@setproduct-ui/demo/components/CustomScrollbar';
//this themeContextProvider is from @pancakeswap/uikit which causes the error 
import { ThemeContextProvider, Web3ReactManager } from '@adware/ui-shared';
import { ResetCSS } from '@pancakeswap/uikit';
import GlobalStyle from './style/Global';

const App = () => {
  const [theme, setTheme] = useState(useContext(ThemeContext));
  const [isOpenSidebar, setOpenSidebar] = useState(useContext(SidebarStateContext));

  return (
    <Suspense fallback={null}>
      <React.Fragment>
        <ThemeContext.Provider value={{ isDark: theme.isDark, setDark: setTheme }}>
          <SidebarStateContext.Provider
            value={{
              leftSidebarState: isOpenSidebar.left,
              rightSidebarState: isOpenSidebar.right,
              setSidebarState: setOpenSidebar,
            }}
          >
            <ThemeContextProvider>
              <Router basename="/">
                {/** CONTAINER */}
                <GlobalStyle />
                <div className={DemoAppStyle.container}>
                  {/** LEFT SIDEBAR */}

                  <SidebarContainer left position="left">
                    <div className={DemoAppStyle.sidebar} id="left-sidebar">
                      <SideBar />
                    </div>
                  </SidebarContainer>

                  {/* CONTENT */}
                  <div className={DemoAppStyle.content}>
                    <div>
                      <Web3ReactManager>
                        <Switch>
                          {routes.map((route, index) => (
                            <Route key={index} path={route.path} exact={route.exact} component={route.component} />
                          ))}
                        </Switch>
                      </Web3ReactManager>
                    </div>
                  </div>
                </div>
              </Router>
            </ThemeContextProvider>
          </SidebarStateContext.Provider>
        </ThemeContext.Provider>
      </React.Fragment>
    </Suspense>
  );
};

export default App;

以下是ThemeContext.tsx

import { ThemeProvider as SCThemeProvider } from 'styled-components';
import { light, dark } from '@pancakeswap/uikit';

const CACHE_KEY = 'IS_DARK';

const ThemeContext = React.createContext({ isDark: null, toggleTheme: () => null });

const ThemeContextProvider = ({ children }) => {
  const [isDark, setIsDark] = useState(() => {
    const isDarkUserSetting = localStorage.getItem(CACHE_KEY);
    return isDarkUserSetting ? JSON.parse(isDarkUserSetting) : false;
  });

  const toggleTheme = () => {
    setIsDark(prevState => {
      localStorage.setItem(CACHE_KEY, JSON.stringify(!prevState));
      return !prevState;
    });
  };

  return (
    <ThemeContext.Provider value={{ isDark, toggleTheme }}>
      <SCThemeProvider theme={isDark ? dark : light}>{children}</SCThemeProvider>
    </ThemeContext.Provider>
  );
};

export { ThemeContext, ThemeContextProvider };