Блог

Я использую следующий шаблон для блога. Но я хочу попробовать интерфейс Material. Но когда я добавляю крючок useStyles, я получаю недопустимую ошибку крючка. Кто-нибудь знает, как реализовать пользовательский интерфейс Material без получения ошибки. Заранее благодарю вас!

Это сообщение об ошибке: Необработанная ошибка во время выполнения Ошибка: Недопустимый вызов соединения. Крючки могут вызываться только внутри тела функционального компонента. Это может произойти по одной из следующих причин:

1. У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM).
2. Возможно, вы нарушаете Правила Крючков
3. У вас может быть более одной копии React в одном приложении см. https://reactjs.org/link/invalid-hook-call для получения советов о том, как отладить и устранить эту проблему.

 import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));

export default function Navigation({ categories }) {
  const classes = useStyles();
  return (
    <div>
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <IconButton
              edge="start"
              className={classes.menuButton}
              color="inherit"
              aria-label="menu"
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" className={classes.title}>
              News
            </Typography>
            <Button color="inherit">Login</Button>
          </Toolbar>
        </AppBar>
      </div>
  );
}


 

Ваш образец не содержит деталей MaterialUI.

ты пробовал:

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

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}
 

https://material-ui.com/styles/basics/