Material Tailwind - TypeError：无法读取 null 的属性（读取“useContext”）

Question

我正在使用 React 和 Typescript 并使用 Material Tailwind UI - MT 制作一个客户端项目。但是在使用 MT 的组件时，我收到了 useContext 错误，似乎是在 MT 的 theme.js 中报告的。我已经尝试了一切，但仍然无法修复它，有人知道这个错误吗？

错误信息

错误信息1

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

错误信息2

Uncaught TypeError: Cannot read properties of null (reading 'useContext')
    at useContext (react.development.js:1618:1)
    at useTheme (theme.js:1:1)
    at App (App.tsx:7:1)
    at renderWithHooks (react-dom.development.js:15486:1)
    at mountIndeterminateComponent (react-dom.development.js:20103:1)
    at beginWork (react-dom.development.js:21626:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27490:1)

index.tsx

import React, {Suspense} from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {Provider} from "react-redux";
import {store} from "./grvd/storage";
import {RouterProvider} from "react-router-dom";
import {router} from "./grvd/routers";
import {ThemeProvider} from "@material-tailwind/react";

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);
root.render(
    <React.StrictMode>
        <ThemeProvider>
            <Provider store={store}>
                <Suspense fallback={<div>Loading...</div>}>
                    <RouterProvider router={router}/>
                </Suspense>
            </Provider>
        </ThemeProvider>
    </React.StrictMode>
);

package.json

{
  "name": "client-ver-2",
  "version": "2.0.0",
  "private": true,
  "dependencies": {
    "@emotion/styled": "^11.11.5",
    "@material-tailwind/react": "^2.1.9",
    "@mui/material": "^5.15.16",
    "@reduxjs/toolkit": "^2.2.3",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.96",
    "@types/react": "^18.2.42",
    "@types/react-dom": "^18.3.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.51.4",
    "react-icons": "^5.2.1",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.22.1",
    "react-scripts": "5.0.1",
    "tailwind-merge": "^2.3.0",
    "tailwind-variants": "^0.2.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.3"
  }
}

tailwind.config.ts

import graviadTheme from "./graviad-theme.js";
import withMT from "@material-tailwind/react/utils/withMT";

module.exports = withMT({
    content: ["./src/**/*.{html,js, ts,tsx}"],
    theme: {
        extend: {
            colors: graviadTheme.colors,
            fontFamily: graviadTheme.fontFamily,
            fontSize: graviadTheme.fontSize,
            boxShadow: graviadTheme.boxShadow,
            borderRadius: graviadTheme.borderRadius,
        },
    },
    plugins: [
        require("tailwindcss"),
        require("autoprefixer"),
    ],
});

我非常努力地尝试了各种方法，例如更新到最新版本、降级版本，但都没有成功。希望得到大家的帮助<3

Answer 1

错误似乎来自您的 App.tsx 组件。请显示代码，但根据您的错误消息，您可能在条件内使用了挂钩，这会引发错误，因此您应该更改它。