所以我有点新反应,我正在尝试为我的网站设置一个切换主题。这些是我遵循的说明-“https://css-tricks.com/a-dark-mode-toggle-with-react-and-themeprovider/”
注意:我的应用是一个 react + NetCore 应用。
每当我使用 ThemeProvider 这是我得到的错误:“错误:无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一发生:
- 你可能有不匹配的 React 版本和渲染器(例如 React DOM)
- 您可能违反了 Hooks 规则
- 您可能在同一个应用程序中拥有多个 React 副本,请参阅https://reactjs.org/link/invalid-hook-call以获取有关如何调试和修复此问题的提示。”
这是我的 App.js 代码:
import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { ThemeProvider } from 'styled-components';
import { GlobalStyles } from './components/GlobalTheme'
import { LightTheme, DarkTheme } from './components/Themes';
export default class App extends Component {
displayName = App.name
render() {
return (
<ThemeProvider theme={DarkTheme}>
<div>
<GlobalStyles />
<Layout>
<Route exact path='/' component={Home} />
</Layout>
</div>
</ThemeProvider>
)}
}
这是我的 package.json 文件:
{
"name": "NotePadApp",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^3.4.1",
"react": "17.0.2",
"react-redux": "^6.0.0",
"react-bootstrap": "^0.31.5",
"react-dom": "17.0.2",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "5.2.0",
"react-scripts": "1.0.17",
"rimraf": "^2.6.2"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
这是全球风格:
//Global Themes
import { createGlobalStyle } from 'styled-components';
export const GlobalStyles = createGlobalStyle`
*,
*:: after,
*:: before {
box - sizing: border - box;
}
body {
background: ${({ theme }) => theme.bodyBackGroundColor} !important;
color: ${({ theme }) => theme.textColor} !important;
}
`;
这是themes.js:
//Themes
export const DarkTheme = {
bodyBackGroundColor: '#222222',
textColor: '#ffffff',
}
export const LightTheme = {
bodyBackGroundColor: '#ffffff',
textColor: '#222222',
}
这些是给我的建议,我已经尽可能地研究了它们,但没有运气。
- 你可能有不匹配的 React 版本和渲染器(例如 React DOM)
- 您可能违反了 Hooks 规则
- 你可能在同一个应用程序中拥有多个 React 副本