Question

在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>
  );
}

材料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隔离当前正在使用的“反应”库的方法：

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

使用makeStyles-useStyles（）全局引发“无效的挂钩呼叫”错误

1 个答案: