“ClassNameMap”类型上不存在属性“包装器”<never> ' Typescript</never>

Question

晚上好，在我的.tsx文件中，它说wrapper不存在。 我正在使用材质 UI 和 Typescript。 我也是 Typescript 的新手，正在努力转换。 我不确定为什么它说它在转换之前工作时不存在。 非常感谢任何指导。

管理员.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> ); }

管理风格

 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;

错误

 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是一个高阶组件，不能像您在这里尝试做的那样用作钩子。 您尝试在另一个问题中使用的makeStyles是不同的。

文档向您展示了如何使用它 - 对于您的 Admin.tsx，它可能看起来像这样：

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

export default appStyle(Admin);

您还需要更新appStyle ：

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