问题描述
我需要使用两个不同的库 @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 (将#修改为@）