Add typings for MaterialUI overrides

[wejrox]

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.

[MendelBak]

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.

This is great! Thank you so much!

For future Typescripts users who will follow, create a new file called whateverYouWant.ts and paste the above code into it. MUI should stop complaining that the override options don't exist (at least for the specific options described. Add more, if you need them.).

See this link for more information (module augmentation).
https://material-ui.com/guides/typescript/#customization-of-theme

[joeplaa]

This doesn't work for me. I get another TypeScript error: Duplicate identifier 'ComponentNameToClassKey'. And the overrides still don't exist according to TypeScript.

[AnthonyLzq]

This doesn't work for me. I get another TypeScript error: Duplicate identifier 'ComponentNameToClassKey'. And the overrides still don't exist according to TypeScript.

Which version of TypeScript are you using? I'm using TypeScript and it works like a charm. These are my package versions in case you want to know:

"@material-ui/core": "^4.12.3"
"@material-ui/icons": "^4.11.2"
"@types/node": "^12.0.0"
"@types/react": "^17.0.0"
"@types/react-dom": "^17.0.0"
"material-ui-dropzone": "^3.5.0"
"react": "^17.0.2"
"typescript": "^4.1.2"

I've created my app using cra: npx create-react-app frontend --template typescript

[joeplaa]

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?

[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.

[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.