node.js - 使用 Material-UI 样式时反应钩子错误

Question

我在空闲时间一直在自学 React 和 node.js，并且我遇到了为什么我使用 material-ui 的 makeStyles 违反了 react hook 规则的原因。

我一直在从 material-ui 网站复制代码，但即使这样似乎也违反了规则。他们的代码示例和我的主要区别在于我的代码有多个导出。下面包含的代码仅显示了这些功能之一 - 它们在功能上都非常相似。

预期的行为是 Icon 的颜色变为 Material-UI 提供的非 OOTB 颜色。

相反，我得到了无效的钩子调用。钩子只能在函数组件的主体内部调用。我相信我是在顶层而不是在条件/比较语句中执行此操作。有点失落！

任何关于我哪里出错的指导都会很棒。

谢谢！

// ItemHelper.js

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

import AssignmentIcon from '@material-ui/icons/Assignment';
import BugIcon from '@material-ui/icons/BugReport';
import BookIcon from '@material-ui/icons/Book';
import Help from '@material-ui/icons/Help';


const useStyles = makeStyles(theme => ({
    successIcon: {
        color: 'green'
    },
    errorIcon: {
        color: 'red'
    }
  }));



export function GetIconForItemType(itemTypeID) {

    const classes = useStyles();
    var data = null;

    switch (itemTypeID) {
        case 1:
            data = <AssignmentIcon className={classes.successIcon} />;
            break;
        case 2:
            data = <BugIcon color="error" />;
            break;
        case 3:
            data = <BookIcon color="primary" />;
            break;
        default: 
            data = <Help />;
            break;
    }
    return data;
}

标签： node.jsreactjsmaterial-uireact-hooks