react: This expression is not callable. Type 'never' has no call signatures

user_1316702 0
Viewed 3746

I am getting an error with useStyles. Does anyone see what I am doing wrong? Typescript?

The error is this line:

const classes = useStyles();

import React from "react";
import { makeStyles } from "@material-ui/core";
import Drawer from "@material-ui/core/Drawer";
import Typography from "@material-ui/core/Typography";
const drawerWidth = 240;
const useStyles = makeStyles({
  page: {
    background: "#f1f1f1",
    width: "100%",
  },
  drawer: {
    width: drawerWidth,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  root: {
    display: "flex",
  },
});

const Layout: React.FC = ({ children }) => {
  const classes = useStyles();
  return (
    <div className={classes.page}>
      <div>{children}</div>
    </div>
  );
};

Version information:

@material-ui/core@5.0.0-beta.5
│ ├─┬ @material-ui/system@5.0.0-beta.5
│ │ ├─┬ @material-ui/private-theming@5.0.0-beta.5
│ │ │ └── react@17.0.2 deduped
│ │ ├─┬ @material-ui/styled-engine@5.0.0-beta.5
│ │ │ └── react@17.0.2 deduped
│ │ └── react@17.0.2 deduped
│ ├─┬ @material-ui/unstyled@5.0.0-alpha.44
│ │ └── react@17.0.2 deduped
│ ├─┬ @material-ui/utils@5.0.0-beta.5
│ │ └── react@17.0.2 deduped
│ ├─┬ react-transition-group@4.4.2
│ │ └── react@17.0.2 deduped
│ └── react@17.0.2 deduped
├─┬ @material-ui/icons@4.11.2
│ └── react@17.0.2 deduped
├─┬ @mui/icons-material@5.2.4
│ └── react@17.0.2 deduped
├─┬ @mui/material@5.2.4
│ ├─┬ @mui/base@5.0.0-alpha.60
│ │ └── react@17.0.2 deduped
│ ├─┬ @mui/system@5.2.4
│ │ ├─┬ @mui/styled-engine@5.2.4
│ │ │ └── react@17.0.2 deduped
│ │ └── react@17.0.2 deduped
│ ├─┬ @mui/utils@5.2.3
│ │ └── react@17.0.2 deduped
│ └── react@17.0.2 deduped
├─┬ @mui/styles@5.2.3
│ ├─┬ @mui/private-theming@5.2.3
material-ui typescript reactjs
1 Answers

Your version is highly unstable (v5 beta). @material-ui has been renamed to @mui and v5 is now out of beta and at version 5.2.4 (at time of writing).

Uninstall @material-ui, run npm install @mui/material @emotion/react @emotion/styled and you should be good to go. I just tried the code below and no typescript errors.

See also sample 3 for an example.

import { makeStyles } from "@mui/styles";
import type { FC } from "react";

const drawerWidth = 240;

const useStyles = makeStyles({
  page: {
    background: "#f1f1f1",
    width: "100%",
  },
  drawer: {
    width: drawerWidth,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  root: {
    display: "flex",
  },
});


const Layout: FC = ({ children }) => {
  const classes = useStyles();
  return (
    <div className={classes.page}>
      <div>{children}</div>
    </div>
  );
};
user_128476920
Related