如何解决有没有办法在我的 React 应用程序中使用两个不同的 ThemeProviders
我需要使用两个不同的库 @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 };
window.normalizeWheel = require('normalize-wheel');
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
