makeStyles() throwing error using Typescript-CodePudding

Good Evening, I am trying to convert my JS react application to React Typescript, but I am running into a very long error. I am not sure how to get past this. Below is the code in the file its referencing and how I am implementing it, as well as the error.

I am new to Typescript and I have tried other solutions from other Stackoverflow posts, but none to see to have worked. I was originally using creatStyles(), but that does not seem to work either.

If I changed the implementation of useStyles to

//const useStyles = makeStyles<DefaultTheme>((theme: Theme) => {createStyles(appStyle)});

Then the error I get tells me that theme:Theme => void

Any guidance is appreciated

TypeScript error in /Users/augustshah/Documents/Coding-Tools-new/Projects/Payment-Dashboard/src/layouts/Admin.tsx(43,30):
Argument of type '(theme: Theme) => { wrapper: { position: string; top: string; height: string; }; mainPanel: { maxHeight: string; width: string; overflowScrolling: string; transition: string; overflow: string; position: string; float: string; }; content: { ...; }; container: { ...; }; map: { ...; }; }' is not assignable to parameter of type 'Styles<Theme, {}, "content" | "map" | "wrapper" | "mainPanel" | "container">'.
  Type '(theme: Theme) => { wrapper: { position: string; top: string; height: string; }; mainPanel: { maxHeight: string; width: string; overflowScrolling: string; transition: string; overflow: string; position: string; float: string; }; content: { ...; }; container: { ...; }; map: { ...; }; }' is not assignable to type 'StyleRulesCallback<Theme, {}, "content" | "map" | "wrapper" | "mainPanel" | "container">'.
    Call signature return types '{ wrapper: { position: string; top: string; height: string; }; mainPanel: { maxHeight: string; width: string; overflowScrolling: string; transition: string; overflow: string; position: string; float: string; }; content: { ...; }; container: { ...; }; map: { ...; }; }' and 'StyleRules<{}, "content" | "map" | "wrapper" | "mainPanel" | "container">' are incompatible.
      The types of 'wrapper' are incompatible between these types.
        Type '{ position: string; top: string; height: string; }' is not assignable to type 'CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>'.
          Type '{ position: string; top: string; height: string; }' is not assignable to type 'CreateCSSProperties<{}>'.
            Types of property 'position' are incompatible.
              Type 'string' is not assignable to type 'PositionProperty | PropsFunc<{}, PositionProperty>'.  TS2345

    41 |   </Switch>
    42 | );
  > 43 | const useStyles = makeStyles((theme: Theme) => (appStyle(theme)));
       |                              ^
    44 | 
    45 | 
    46 |  //const useStyles = makeStyles<DefaultTheme>((theme: Theme) => {createStyles(appStyle)});

Admin.tsx

const useStyles = makeStyles((theme: Theme) => (appStyle(theme)));



export default function Admin({ ...rest }) {
  // styles
  //const classes = useStyles();
  const theme = useTheme<Theme>();
  const classes = useStyles(theme);

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

AdminStyle.tsx

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

const appStyle = theme => ({
  wrapper: {
    position: "relative" as "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;

Babel

module.exports = api => {
    api.cache.forever();
    return {
      "presets": [
        [ "@babel/preset-env", {
          "targets": {
            "node": "8.10"
          }
        }, '@babel/preset-typescript']
      ],
      plugins: [
        "add-react-displayname",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-object-rest-spread"
      ]
    };
  }

TSconfig

{
 
  "compilerOptions": {
    "target": "es2016",
    "module": "esnext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "skipLibCheck": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": "./",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "keyofStringsOnly": true,
    "typeRoots": [
      "./src"
    ],
    "types": [
      "react",
      "jest",
      "node"
    ],
    "jsx": "react"
  },
  "include": [
    "src/*"
  ],
  "exclude": [
    "node_modules",
  ],
}

new Error

src/assets/jss/material-dashboard-react/layouts/adminStyle.tsx
  Line 9:26:  Parsing error: Unexpected token, expected ","

   7 | const appStyle = theme => ({
   8 |   wrapper: {
>  9 |     position: "relative" as "relative",
     |                          ^
  10 |     top: "0",
  11 |     height: "100vh"
  12 |   },

CodePudding user response：

Lets have a look at that error. While it is very long, Typescript helpfully drills down on the exact type mismatch we are having. Looking at

The types of 'wrapper' are incompatible between these types.
Types of property 'position' are incompatible

we know that the key wrapper.position is the origin of the type mismatch.

Looking further into the last line of the type error:

Type 'string' is not assignable to type 'PositionProperty | PropsFunc<{}, PositionProperty>'

We see that Typescript does not match our type string to whatever PositionProperty is.

PositionProperty is a set of allowed strings, such as relative and absolute, but typescript thinks our type is string, although we defined position as "relative":

const appStyle = theme => ({
wrapper: {
  position: "relative",

This is because of Typescripts type widening. We need to tell typescript that we want the specific type here. Changing the assignment to

const appStyle = theme => ({
wrapper: {
  position: "relative" as "relative", // Tells typescript to use "relative" as type

should fix your error.

CodePudding user response：

import {withStyles} from 'materialui/core/styles'
const decorate = withStyles({
  container: {
    position: 'absolute',
    // ...
  },
}