reactjs - 使用 makeStyles - useStyles() 全局抛出 'Invalid Hook Call' 错误

Question

我使用 Material UI 网站上的这个例子得到了“无效的 Hook 错误”: 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”实例，这导致了“无效的 Hook 错误”。

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

以下是我如何告诉 webpack 隔离当前正在使用的“ react ”库:

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

这修复了错误。

Answer 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。