Использование makeStyles - useStyles () глобально выдает ошибку «Invalid Hook Call» - PullRequest
Новая
       23

Использование makeStyles - useStyles () глобально выдает ошибку «Invalid Hook Call»

0 голосов
/ 09 июля 2019

Я получаю 'Invalid hook error', используя этот пример с веб-сайта Material UI: https://material -ui.com / стили / продвинутый / # 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 в качестве экспортируемого модуля в моей библиотеке компонентов, как и предлагалось.

Но заметил, что был дубликат экземпляра «реагировать», который вызвал «Недопустимую ошибку перехвата». 

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

Вот как я сказал webpack изолировать текущую используемую библиотеку «реагировать»: 

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

Это исправило ошибку.

...