CODEWITHSUNDEEP
reactjstypescriptmaterial-uireact-typescript
Amit Singh Rawat
Amit Singh Rawat

Reputation: 589

Typescript Type error when Adding custom new property 'tab' inside 'Typography' in Material UI Theme

Currently, using

"react": "^17.0.2", 
@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/styles": "^4.11.4",

Typescript Type error when Adding custom new property 'tab' inside 'Typography' in the Material UI Theme

Error: Property 'tab' does not exist on type 'Typography'

It works fine in theme.tsx file

Theme.tsx file

declare module "@material-ui/core/styles/createTypography" {
  interface TypographyOptions {
    tab?: {
      fontFamily?: string;
      textTransform?: string;
      fontWeight?: number;
      fontSize?: string;
    };
  }
}

const theme = createTheme({
  typography: {
    tab: {
      fontFamily: "Raleway",
      textTransform: "none",
      fontWeight: 700,
      fontSize: "1rem",
    },
  },
});

On another typescript component I get the Property 'tab' error Property 'tab' does not exist on type 'Typography'

const useStyles = makeStyles((theme) => ({
  tab: {
    ...theme.typography.tab, // error: Property 'tab' does not exist on type 'Typography'
    minWidth: 10,
    marginLeft: "25px",
  },
}));

enter image description here

So how do I get a new custom theme props?

Upvotes: 0

Views: 860

Answers (1)

Amit Singh Rawat
Amit Singh Rawat

Reputation: 589

Correct theme setting.

import { createTheme } from "@material-ui/core";

const arcBlue = "#0B72B9";
const arcOrange = "#FF8C00";

declare module "@material-ui/core/styles/createPalette" {
  interface CommonColors {
    blue: string;
    orange: string;
  }
}

declare module "@material-ui/core/styles/createTypography" {
  interface Typography {
    tab: TypographyStyleOptions | undefined;
  }

  interface TypographyOptions {
    tab: TypographyStyleOptions | undefined;
  }
}

const theme = createTheme({
  palette: {
    primary: {
      main: `${arcBlue}`,
    },
    secondary: {
      main: `${arcOrange}`,
    },
    common: {
      blue: `${arcBlue}`,
      orange: `${arcOrange}`,
    },
  },
  typography: {
    tab: {
      fontFamily: "Raleway",
      textTransform: "none",
      fontWeight: 700,
      fontSize: "1rem",
    },
  },
});

export default theme;

Upvotes: 1

Related Questions