material-ui: Documentation for extending theme is wrong. Module Augmentation does not work.
In https://mui.com/customization/theming/#custom-variables the docs tell you to use following example to extend typescript type but it is not working:
declare module '@mui/material/styles' {
interface Theme {
status: {
danger: string;
};
}
// allow configuration using `createTheme`
interface ThemeOptions {
status?: {
danger?: string;
};
}
}
- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
Current example in docs does not work.
Expected Behavior 🤔
Example should work.
Steps to Reproduce 🕹
Follow the docs.
The following type does work instead:
declare module "@mui/material/styles/createTheme" {
interface Theme {
test: string,
}
// allow configuration using `createMuiTheme`
interface ThemeOptions {
test?: string;
}
}
Your Environment 🌎
`npx @mui/envinfo`
System:
OS: Linux 5.10 Ubuntu 20.04.2 LTS (Focal Fossa)
Binaries:
Node: 14.17.5 - /usr/bin/node
Yarn: 1.22.11 - /usr/local/bin/yarn
npm: 7.24.1 - /usr/bin/npm
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 13
- Comments: 17 (6 by maintainers)
I’ve included a small sandbox that showcases typical use cases:
modifying
themeto include extra custom propertiesmodifying
theme.paletteto include extra color codeshttps://codesandbox.io/s/romantic-gould-sbkc08
^ Codesandbox errors are the side product of it not playing nicely with declaration files; copy-paste both
App.tsxanddeclaration.d.tsinto your local project to see it does, in fact, work. I hope this ends up helping someone down the line.@mnajdova I think what the MUI docs could still offer to explain is:
Why should the
Themeinterface also be extended and not justThemeOptions. I assume that my sandbox’s commentary approximates the reason.Possibly re-organize the example to showcase separate declarations in
.d.tsfiles rather than featuring them together in one.tsxfile with the rest of the code. In fairness, the onus is on the users to read up on declarations & module augmentation and adapt accordingly. It is the translation into this other scenario that might be confusing some users when they try to attempt it.+1 as the docs aren’t clear. Would be useful to have more information on extending the theme in typescript (my particular case, extending the palette)
Any reason this was closed? I’m finding the docs extremely unclear.
Maybe repository should contain a minimal tested example of theme with module augmentation for better understanding and testing
I am on this.
Thanks for sharing your suggestions @MauricePasternak. I agree, we can extend/improve the docs around this. cc @samuelsycamore @siriwatknp