Реагировать на ошибку при использовании стилей Material-UI - PullRequest
Новая
       12

Реагировать на ошибку при использовании стилей Material-UI

1 голос
/ 20 октября 2019

В свое свободное время я учил себя React и node.js, и я не могу понять, почему мое использование makeStyles-ui материала нарушает правила реагирования.

Я тиражировалкод с сайта Material-UI, но даже это, кажется, нарушает правила. Основное различие между их примерами кода и моим состоит в том, что мой код имеет несколько экспортов. Приведенный ниже код показывает только одну из этих функций - все они будут очень похожи по функциям.

Ожидаемое поведение состоит в том, что цвет значка изменится на цвет, отличный от OOTB, предоставляемый интерфейсом материалов.

Вместо этого я получаю Invalid hook call. Хуки могут быть вызваны только внутри тела функционального компонента. Я считаю, что я делаю это на верхнем уровне, а не внутри условия / сравнения. Немного потерян!

Любое руководство о том, где я иду не так, было бы удивительно.

Спасибо! 

// 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;
}
...