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"
  ]
}