使用 makeStyles - useStyles() 全局抛出“Invalid Hook Call”错误答案

【问题标题】：Using makeStyles - useStyles() globally throws 'Invalid Hook Call' error使用 makeStyles - useStyles() 全局抛出“Invalid Hook Call”错误
【发布时间】：2019-11-19 06:34:06
【问题描述】：

我使用 Material UI 网站上的这个例子得到了“无效的钩子错误”： https://material-ui.com/styles/advanced/#GlobalCss.js

import React from 'react';
import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles({
  '@global': {
    '.cssjss-advanced-global-root': {
      height: 100,
      width: 100,
      backgroundColor: 'blue',
    },
    '.cssjss-advanced-global-child': {
      height: 8,
      backgroundColor: 'red',
    },
  },
});

export default function GlobalCss() {
  useStyles();   // <-- causes error

  return (
    <div className="cssjss-advanced-global-root">
      <div className="cssjss-advanced-global-child" />
    </div>
  );
}

Material UI 不会将“useStyles()”分配给变量，它们只是在函数组件中调用它。

我，也需要自己调用'useStyles()'来设置全局css。

这是我的 package.json：

  "peerDependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.4.4",
    "@babel/runtime": "^7.4.4",
    "@material-ui/core": "^3.9.3",
    "@material-ui/icons": "^3.0.2",
    "@material-ui/styles": "^3.0.0-alpha.10",
    "babel-loader": "^8.0.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^2.1.1",
    "css-object-loader": "0.0.7",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }

--------已修复--------

按照建议，我最终将 GlobalCss 用作组件库中的导出模块。

但注意到有一个重复的“react”实例，导致了“Invalid Hook Error”。

// run this to check for multiple instances
npm ls react

这是我告诉 webpack 隔离当前正在使用的“react”库的方法：

// webpack.config.js 
resolve:{
    alias: {
      react: path.resolve('./node_modules/react')
    }
}

这修正了错误。

【问题讨论】：

请展示如何使用GlobalCss 组件的代码。您需要将GlobalCss 渲染为一个组件——而不是将其作为函数调用。我的示例可能会有所帮助：stackoverflow.com/questions/56448538/…
我决定根据您的建议单独使用 GlobalCss，而不是在作为库导出的自定义主题包装器中使用。谢谢！ @RyanCogswell

标签： reactjs material-ui global

【解决方案1】：

我在 Material UI beta 0 中遇到过这个问题，它让它尝试了很多东西。

首先，确保我只有一个版本的 React 和 React DOM。
我通过运行检查了版本：

npm ls react
npm ls react-dom

就我而言，这并没有解决问题。

我不知道这是否是您的错误，但只是为了避免其他人像我一样使用谷歌搜索，我的问题是我需要添加 @material-ui/styles 作为依赖项。导入并没有抱怨，所以我认为我不需要，但我确实这样做了。

所以，我做到了：

npm i @material-ui/styles@next

在处理 TypeScript 和 react-scripts 版本以及安装和重新安装很多东西之后 - 甚至考虑安装一些将 create-react-app 的 Webpack 配置修改为别名 react 的软件包，但没有其中需要的，只是特定的 npm 安装，它就可以工作了！

顺便说一句，我认为你应该在dependencies 而不是devDependencies 中拥有这些。除非你在 Material UI（不是应用程序）之上构建一个库，然后他们会转到 peerDependencies。

【讨论】：