'Using makeStyles in material ui with typescript

I'm trying to convert JavaScript template to Typescript. So I have this accordionStyle.ts like below

import {
  primaryColor,
  grayColor
} from "../../material-dashboard-pro-react";

const accordionStyle = (theme?:any) => ({
  root: {
    flexGrow: 1,
    marginBottom: "20px"
  },
  expansionPanel: {
    boxShadow: "none",
    "&:before": {
      display: "none !important"
    }
  },
  expansionPanelExpanded: {
    margin: "0 !important"
  },
  expansionPanelSummary: {
    minHeight: "auto !important",
    backgroundColor: "transparent",
    borderBottom: "1px solid " + grayColor[5],
    padding: "25px 10px 5px 0px",
    borderTopLeftRadius: "3px",
    borderTopRightRadius: "3px",
    color: grayColor[2],
    "&:hover": {
      color: primaryColor[0]
    }
  },
  expansionPanelSummaryExpaned: {
    color: primaryColor[0],
    "& $expansionPanelSummaryExpandIcon": {
      [theme.breakpoints.up("md")]: {
        top: "auto !important"
      },
      transform: "rotate(180deg)",
      [theme.breakpoints.down("sm")]: {
        top: "10px !important"
      }
    }
  },
  expansionPanelSummaryContent: {
    margin: "0 !important"
  },
  expansionPanelSummaryExpandIcon: {
    [theme.breakpoints.up("md")]: {
      top: "auto !important"
    },
    transform: "rotate(0deg)",
    color: "inherit",
    position: "absolute",
    right: "20px",
    [theme.breakpoints.down("sm")]: {
      top: "10px !important"
    }
  },
  expansionPanelSummaryExpandIconExpanded: {},
  title: {
    fontSize: "15px",
    fontWeight: "bolder",
    marginTop: "0",
    marginBottom: "0",
    color: "inherit"
  },
  expansionPanelDetails: {
    padding: "15px 0px 5px"
  }
});

export default accordionStyle;

I'm trying to import above styles to my component like below.

import styles from "../../assets/jss/material-dashboard-pro-react/components/accordionStyle";
const useStyles = makeStyles(styles);

Above lines work well in Javascript. From this line --> const useStyles = makeStyles(styles); I'm getting below typescript error

No overload matches this call.
  Overload 1 of 2, '(style: Styles<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">, options?: Pick<...> | undefined): (props?: any) => Record<...>', gave the following error.
    Argument of type '(theme?: any) => { root: { flexGrow: number; marginBottom: string; }; expansionPanel: { boxShadow: string; "&:before": { display: string; }; }; expansionPanelExpanded: { margin: string; }; expansionPanelSummary: { ...; }; ... 5 more ...; expansionPanelDetails: { ...; }; }' is not assignable to parameter of type 'Styles<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">'.
      Type '(theme?: any) => { root: { flexGrow: number; marginBottom: string; }; expansionPanel: { boxShadow: string; "&:before": { display: string; }; }; expansionPanelExpanded: { margin: string; }; expansionPanelSummary: { ...; }; ... 5 more ...; expansionPanelDetails: { ...; }; }' is not assignable to type 'StyleRulesCallback<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">'.
        Call signature return types '{ root: { flexGrow: number; marginBottom: string; }; expansionPanel: { boxShadow: string; "&:before": { display: string; }; }; expansionPanelExpanded: { margin: string; }; expansionPanelSummary: { minHeight: string; ... 6 more ...; "&:hover": { ...; }; }; ... 5 more ...; expansionPanelDetails: { ...; }; }' and 'Record<"root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails", CSSProperties | ... 1 more ... | PropsFunc<...>>' are incompatible.
          The types of 'expansionPanelSummaryExpandIcon' are incompatible between these types.
            Type '{ [x: number]: { top: string; }; transform: string; color: string; position: string; right: string; }' is not assignable to type 'CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>'.
              Type '{ [x: number]: { top: string; }; transform: string; color: string; position: string; right: string; }' is not assignable to type 'CreateCSSProperties<{}>'.
                Types of property 'position' are incompatible.
                  Type 'string' is not assignable to type '"inherit" | "absolute" | "-moz-initial" | "initial" | "revert" | "unset" | "fixed" | "-webkit-sticky" | "relative" | "static" | "sticky" | PropsFunc<{}, "inherit" | "absolute" | "-moz-initial" | ... 8 more ... | undefined> | undefined'.
  Overload 2 of 2, '(styles: Styles<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">, options?: Pick<...> | undefined): (props: {}) => Record<...>', gave the following error.
    Argument of type '(theme?: any) => { root: { flexGrow: number; marginBottom: string; }; expansionPanel: { boxShadow: string; "&:before": { display: string; }; }; expansionPanelExpanded: { margin: string; }; expansionPanelSummary: { ...; }; ... 5 more ...; expansionPanelDetails: { ...; }; }' is not assignable to parameter of type 'Styles<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">'.
      Type '(theme?: any) => { root: { flexGrow: number; marginBottom: string; }; expansionPanel: { boxShadow: string; "&:before": { display: string; }; }; expansionPanelExpanded: { margin: string; }; expansionPanelSummary: { ...; }; ... 5 more ...; expansionPanelDetails: { ...; }; }' is not assignable to type 'StyleRulesCallback<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">'.

so how to add "styles" to "makeStyles" in typescript ?

Solution 1:^[1]

You must add this to tsconfig.json

{
     "compilerOpti`enter code here`ons": {
     "lib": ["es6", "dom"],
     "noImplicitAny": true,
     "noImplicitThis": true,
     "strictNullChecks": true
   }
 }

and use Your style same this: first time import this

import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";

and do this

const useStyles = makeStyles((theme: Theme) => createStyles({
         root:{
            backgroundColor : '#f9f9f9',
         }});

Solution 2:^[2]

You should use makeStyles like this:

const accordionStyle = makeStyles((theme?: any) => ({

Then declare classes:

const classes = accordionStyle();

Use in component:

<h1 className={classes.test}>Hello CodeSandbox</h1>

Sample: https://codesandbox.io/s/cold-river-n21g9?file=/src/App.tsx:1901-1959

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Omid Moghadas
Solution 2	Viet

'Using makeStyles in material ui with typescript

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]