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

Question

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}

Answer 1

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 => ({
  // ...
});