Property 'wrapper' does not exist on type 'ClassNameMap<never>' Typescript

Issue

Good Evening, In my .tsx file it says that wrapper does not exist. I am using material UI and Typescript. I am also new to Typescript and working on converting over. I am not sure why it says that it does not exist when it worked before the conversion. Any guidance is much appreciated.

Admin.tsx

import React, {useEffect, useState, createRef} from "react";
import {Switch, Route, Redirect } from "react-router-dom";

// @material-ui/core components
import {  makeStyles } from "@material-ui/core";
// core components
import Navbar from "../components/Navbars/Navbar.js";
import Footer from "../components/Footer/Footer.js";
import Sidebar from "../components/Sidebar/Sidebar.js";

import routes from "../routes";

import appStyle from "../assets/jss/material-dashboard-react/layouts/adminStyle";

import lgImage from "../assets/img/site-logo.png";
import bgImage from '../assets/img/sidebar-2.jpg';





let ps;

const switchRoutes = (
  <Switch>
    {routes.map((prop, key) => {
      if (prop.layout === "/admin") {
        return (
          <Route
            path={prop.layout + prop.path}
            component={prop.component}
            key={key}
          />
        );
      }
      return null;
    })}
    <Redirect from="/admin" to="/admin/login" />
  </Switch>
);



const useStyles = makeStyles(appStyle);

export default function Admin({ ...rest }) {
  // styles
  const classes = useStyles();
  return (
    <div className={classes.wrapper}>
      {handleSideBarLogin() ?
     null :  <Sidebar
     routes={routes}
     logoText={"02DesignStudio"}
     logo={logo}
     image={image}
     handleDrawerToggle={handleDrawerToggle}
     open={mobileOpen}
     color={color}
     {...rest}
    />
      }

      <div className={classes.mainPanel} ref={mainPanel}>
        <Navbar
          routes={routes}
          handleDrawerToggle={handleDrawerToggle}
          {...rest}
        />
        {getRoute() ? (
          <div className={classes.content}>
            <div className={classes.container}>{switchRoutes}</div>
          </div>
        ) : (
          <div className={classes.map}>{switchRoutes}</div>
        )}
        {getRoute() ? <Footer /> : null}

      </div>
    </div>
  );
}

AdminStyl

import {
  drawerWidth,
  transition,
  container
} from "../../material-dashboard-react";
import {  withStyles } from "@material-ui/core";

const appStyle = theme => (withStyles({
  wrapper: {
    position: "relative" ,
    top: "0",
    height: "100vh"
  },
  mainPanel: {
    [theme.breakpoints.up("md")]: {
      width: `calc(100% - ${drawerWidth}px)`
    },
    overflow: "auto",
    position: "relative",
    float: "right",
    ...transition,
    maxHeight: "100%",
    width: "100%",
    overflowScrolling: "touch"
  },
  content: {
    marginTop: "70px",
    padding: "30px 15px",
    minHeight: "calc(100vh - 123px)"
  },
  container,
  map: {
    marginTop: "70px"
  }
}));

export default appStyle;

Error

TypeScript error in /Users/augustshah/Documents/Coding-Tools-new/Projects/Payment-Dashboard/src/layouts/Admin.tsx(105,29):
Property 'wrapper' does not exist on type 'ClassNameMap<never>'.  TS2339

    103 | 
    104 |   return (
  > 105 |     <div className={classes.wrapper}>
        |                             ^
    106 |       {handleSideBarLogin() ?
    107 |      null :  <Sidebar
    108 |      routes={routes}

Solution

withStyles is a Higher-order component that cannot be used as a hook like you are trying to do here. It is different to makeStyles that you tried to use in the other question.

The docs show you how to use it - for your Admin.tsx it would probably look something like this:

function Admin({ classes, ...rest }) {
  return (
    <div className={classes.wrapper}>
      // <...>
    </div>
  );
}

export default appStyle(Admin);

Also you need to update appStyle:

const appStyle = withStyles(theme => ({
  // ...
});

Answered By - LinuCC