Problem with DefaultTheme type definition

• [ x] The issue is present in the latest release.
• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When trying to utilize a color from my theme pallete inside a makeStyles, it says that DefaultTheme doesn``t have property ‘palette’, which is odd since I logged the theme object and it has said property. So I went to the type definition of DefaultTheme in node_modules/@material-ui/core/styles/defaultTheme/index.d.ts and notice that the type exported is in fact an empty object:

/**
 * The default theme interface, augment this to avoid having to set the theme type everywhere
 */
export interface DefaultTheme {}

Why should I augment this interface instead of utilizing Theme directly?

Expected Behavior 🤔

No error.

Steps to Reproduce 🕹

https://codesandbox.io/s/modern-rain-h5n3m

Context 🔦

I am using material-ui with Typescript (3.7.5) and I was trying to change the background color of a Divider to a color I have in a custom theme, so I tried to create a class using makeStyles. The problem is that when trying to access the palette property in the theme inside makeStyles, Typescript would give an error (ts 2339) saying that DefaultTheme doesn`t have the palette property.

I have managed to fix the issue in my computer (but not on codesandbox) by importing Theme:

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

const useStyles = makeStyles((theme: Theme) => ({
    dividerColor: {
        backgroundColor: theme.palette.secondary.main
    }
}));

Your Environment 🌎

I’m using the tsconfig from create-react-app:

tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

Tech	Version
Material-UI	v4.10.2
React	v16.13.1
TypeScript	v3.7.5

[mnajdova]

Note that, @material-ui/styles is no longer part of @material-ui/core. It is a standalone package now that exports some JSS utils (that we will deprecate at some point). If you wish to use it with @material-ui/core’s theme, you need to either:

• augment, as shown in https://github.com/mui-org/material-ui/issues/21551#issuecomment-851991897
• use the generic in makeStyles, withStyles and the other utils for providing the Theme interface.

I would suggest going with option number 1, if you still want to use the utilities exported in @material-ui/styles. I will make sure to include this in the migration guide, as it is most likely going to be a pain for other TS users too.

[olros]

I’ve experienced the same as @Jack-Works with alpha-v35. Solved it with this augmentation:

import { Theme } from '@material-ui/core';

declare module '@material-ui/styles' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultTheme extends Theme {}
}

Hope this wasn’t intended.