为什么 ThemeProvider 会产生这个错误？

问题描述

所以我对反应有点陌生，我正在尝试为我的网站设置一个切换主题。 这些是我遵循的说明-“https://css-tricks.com/a-dark-mode-toggle-with-react-and-themeprovider/”

注意：我的应用是 react + NetCore 应用。

每当我使用 ThemeProvider 时，都会出现以下错误： “错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了钩子规则
3. 您可能在同一个应用中拥有多个 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"
  }
}

这里是 GlobalStyle：

//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',}

这些是给我的建议，我尽我所能研究了它们，但没有运气。

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了钩子规则
3. 您可能在同一个应用中拥有多个 React 副本

解决方法

问题是您在 ThemeProvider 的 theme 道具中传递 JSON，但您应该传递 createMuiTheme。所以你的代码变成：

import React,{ Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { ThemeProvider,createMuiTheme } from '@material-ui/core/styles'; //<-- import createMuiTheme
import { GlobalStyles } from './components/GlobalTheme'
import { LightTheme,DarkTheme } from './components/Themes';

export default class App extends Component {

  displayName = App.name

  const theme = createMuiTheme(DarkTheme); //<-- here create mui theme calling createMuiTheme with DarkTheme JSON 

  render() {
    return (
        <ThemeProvider  theme={theme}> //<-- pass theme to ThemeProvider
            <div>
            <GlobalStyles />
                <Layout>
                    <Route exact path='/' component={Home} />
                </Layout>
            </div>
        </ThemeProvider>
    )}
}