Add typings for MaterialUI overrides

Feature Request

Describe the problem related to this feature request

When I’m overriding the Material UI theme, the keys from the MUIDropzone are not available for use.

Describe the solution you’d like

The ability to easily extend the MUI theme overrides type with the overridable props for MUIDropzone.

Describe alternatives you’ve considered

TS-Ignore, but that isn’t going to work well if a new version changes something, and breaks the type safety of typescript. Implementing the change manually by redefining the possible types and redeclaring the Material UI overrides type with them included.

Teachability, Documentation, Adoption, Migration Strategy

A component library named material-ui-pickers does this, and it is easy to extend the overrides for typescript compatibility. This change would only affect Typescript users who wish to override MUI styles, and would be backwards compatible since nothing existed in the past for this functionality which could be broken by this.

Additional context

The following is working for type inspections etc within my Typescript project built within the JetBrains Webstorm IDE:

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

// Interface would be maintained by the repository.
// Of course, this could be split into separate types.
interface MuiDropzoneNameToClassKey {
    MuiDropzoneArea: "root" | "text" | "active" | "invalid" | "textContainer" | "icon";
    MuiDropzonePreviewList: "root" | "imageContainer" | "image" | "removeButton";
    MuiDropzoneSnackbar: "infoAlert" | "successAlert" | "warningAlert" | "errorAlert" | "message" | "icon" | "closeButton";
}

// Overrides would be maintained by the user.

/**
 * Type which accepts anything that's declared above. Can be exported if you wish to define a constant using the types.
 */
type OverridesNameToClassKey = {
    // MaterialUI internally uses the following definition, which also works in my project.
    [Name in keyof MuiDropzoneNameToClassKey]?: Partial<StyleRules<MuiDropzoneNameToClassKey[Name]>>;
};

/**
 * Redeclare the MUI theme override type to allow anything we've defined here to be allowed into the overrides list.
 */
declare module "@material-ui/core/styles/overrides" {
    export interface ComponentNameToClassKey extends OverridesNameToClassKey {}
}

Of course, there may be a better way of achieving the outcome. This is just what I’ve done to make it work.

[joeplaa]

@AnthonyLzq ow, haha, I didn’t see that. I’ll see if I can fix that rule or ignore it then. Thanks for pointing that out.

[AnthonyLzq]

These are the exact versions I’m on currently:

"@material-ui/core": "4.12.3"
"@material-ui/icons": "4.11.2"
"@types/node": "16.11.0"
"@types/react": "17.0.30"
"@types/react-dom": "17.0.9"
"material-ui-dropzone": "3.5.0"
"react": "17.0.2"
"typescript": "4.4.4"

I get a different warning this time by the way: An interface declaring no members is equivalent to its supertype.. Can I safely ignore this one?

I think you can, since it is an error from eslint error and not from TypeScript. Maybe, your eslint rules have not allowed the use of empty interfaces.