대응 유형 스크립트 자료-UI 사용 유형 호출 불가

대응 유형 스크립트 자료-UI 사용 유형 호출 불가

어떤 이유에서인지 다음 오류가 발생하여 useStyles를 호출할 수 없습니다.

This expression is not callable.
  Type 'never' has no call signatures.ts(2349)
const useStyles: never

다음은 전체 코드입니다.

import { makeStyles, Theme } from "@material-ui/core";
import IconButton from "@material-ui/core/IconButton";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import { ReactComponent as HeaderLogo } from "../../images/logo.svg";

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    backgroundColor: theme.palette.VampirismBlack.main,
  }
}));

const Header = (): JSX.Element => {
  const classes = useStyles();

  return (
    <AppBar position="static">
      <Toolbar variant="dense">
        <HeaderLogo width="125" height="75" />
        <IconButton>
          Home
        </IconButton>
        <IconButton>
          Changelog
        </IconButton>
        <IconButton>
          Tutorials
        </IconButton>
        <IconButton>
          Wiki
        </IconButton>
        <IconButton>
          Join Discord
        </IconButton>
      </Toolbar>
    </AppBar>
  )
}

export default Header;

저는 이전에 몇 가지 다른 React 애플리케이션을 구축한 적이 있지만 이 문제에 직면한 적은 없습니다.

아이디어 있어요?

'@mui/styles'에서 가져오면 해결할 수 있습니다.

import { makeStyles, createStyles } from '@mui/styles';

MU-V5에

1. npm npm install @mui/styles를 사용하여 패키지 설치 //

실 @mui/스타일을 추가하여

2. '@mui/styles' 가져오기 {makeStyles}에서 '@mui/styles' 가져오기;

3. 코드 작성

import * as React from 'react';
import { makeStyles } from '@mui/styles';
import Button from '@mui/material/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>;
}

이것은 효과가 있을 것이고, 저에게는 효과가 있었습니다.

문제는 새로운 버전의 Material-UI가 사용되고 있다는 것이었습니다.

import AppBar from "@mui/material/AppBar";
import IconButton from '@mui/material/IconButton';
import { Theme } from '@mui/material/styles';
import Toolbar from '@mui/material/Toolbar';
import { makeStyles } from "@mui/styles";
import { ReactComponent as HeaderLogo } from "../../images/logo.svg";

믿어요makeStyles잘못된 패키지에서 가져오는 중입니다.

이것.

import { makeStyles, Theme } from "@material-ui/core";

다음과 같아야 합니다.

import { makeStyles } from "@material-ui/core/styles";

V5 재료-UI에서는 재료 UI의 스타일 경로를 권장하지 않습니다.대신 MUI는 당신이 의존하기를 바랍니다.sxCSS로 속성을 지정합니다.

이것이 누구에게나 도움이 되기를 바랍니다.

현재 권장되는 방법은 https://mui.com/system/basics/ 입니다.

import * as React from "react";
import Button from "@mui/material/Button";

export default function Hook() {
  return (
    <Button
      sx={{
        border: 0,
        borderRadius: 3,
        boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
        color: "white",
        height: 48,
        padding: "0 30px",
      }}
    >
      Hook
    </Button>
  );
}

이것이 이유입니다: https://mui.com/system/styles/basics/ #why-use-muis-muis-discret-discret.

---

에 대한 자세한 내용을 참조하십시오.makeStyles설명서 참조: @mui/styles(LEGACY)

스타일에 대한 문서화: https://mui.com/system/styles/basics/

⚠ @mui/style은 MUI를 위한 레거시 스타일링 솔루션입니다.@mui/material에서 더 이상 사용되지 않는 스타일링 솔루션으로서 JSS에 의존합니다. v5에서는 더 이상 사용되지 않습니다.번들에 Emotion과 JSS를 모두 포함하지 않으려면 권장 대안인 @mui/시스템 설명서를 참조하십시오.

언급URL : https://stackoverflow.com/questions/69329179/react-typescript-material-ui-usestyles-not-callable