0

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

注意:我的应用是一个 react + NetCore 应用。

每当我使用 ThemeProvider 这是我得到的错误:“错误:无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一发生:

  1. 你可能有不匹配的 React 版本和渲染器(例如 React DOM)
  2. 您可能违反了 Hooks 规则
  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"
  }
}

这是全球风格:

//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. 您可能违反了 Hooks 规则
  3. 你可能在同一个应用程序中拥有多个 React 副本
4

1 回答 1

0

问题是您在ThemeProvider's themeprop 中传递 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>
    )}
}
于 2021-07-27T07:18:48.413 回答