MendelBak
commented
3 years ago 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
AnthonyLzq
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:
Of course, there may be a better way of achieving the outcome. This is just what I've done to make it work.