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/[email protected]
│ ├─┬ @material-ui/[email protected]
│ │ ├─┬ @material-ui/[email protected]
│ │ │ └── [email protected] deduped
│ │ ├─┬ @material-ui/[email protected]
│ │ │ └── [email protected] deduped
│ │ └── [email protected] deduped
│ ├─┬ @material-ui/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ @material-ui/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @material-ui/[email protected]
│ └── [email protected] deduped
├─┬ @mui/[email protected]
│ └── [email protected] deduped
├─┬ @mui/[email protected]
│ ├─┬ @mui/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ @mui/[email protected]
│ │ ├─┬ @mui/[email protected]
│ │ │ └── [email protected] deduped
│ │ └── [email protected] deduped
│ ├─┬ @mui/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @mui/[email protected]
│ ├─┬ @mui/[email protected]

CodePudding user response：

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>
  );
};