TS Module augmentation for adding variants to components not working
See original GitHub issueIt says in the docs here: https://next.material-ui.com/customization/theme-components/, adding a variant to a component when using typescript requires you add this:
declare module '@mui/material/Button' {
export interface ButtonPropsVariantOverrides {
actionHover: true;
}
}
However, this doesn’t work. You’ll still get an error in your createTheme():
Type '"actionHover"' is not assignable to type '"contained" | "outlined" | "text"'.ts(2322)
Button.d.ts(83, 5): The expected type comes from property 'variant' which is declared here on type 'Partial<ButtonProps<"button", {}>>'
(property) variant?: "text" | "outlined" | "contained"
In order to fix this you need to also add the line to your definitions file:
import '@mui/material/Button';
I’m not sure why this is the case but this should probably be added to the docs.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:3
- Comments:6 (2 by maintainers)
Top Results From Across the Web
TS Augmentation not working when adding new props in v5
It is intentional that only variants, sizes and colors can be extended. I'm trying to add a new prop to a component and...
Read more >Property 'main' does not exist on type 'PaletteColorOptions ...
The TypeScript error is unrelated to your module augmentation. The issue is just that defaultColors is of type PaletteOptions .
Read more >Typescript Shorts - Module Augmentation - Karthikeyan's Blog
We will be adding our own colour variants to button component in material ui using module augmentation. open your terminal and run the...
Read more >Theming - Material UI - MUI
Theming. Customize MUI with your theme. You can change the colors, the typography and much more. The theme specifies the color of the...
Read more >Solve any external library error in TypeScript with module ...
This TypeScript tutorial will cover how we can use module augmentation to solve any type errors you might encounter when working with ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@MarksCode
I think the issue here is that when a file with module augmentation doesn’t have
import/exportstatements, you’re defining an ambient module—a shape that does not have an actual implementation—which is not the same as augmenting something that does have an implementation, like theButton.Although, I’ve just quickly tested it in a CodeSandbox, and TypeScript seems to recognize the new variant even if you replace
import '@mui/material/Button';with a useless export, likeexport default '';—perhaps, it’s unnecessary to import the module itself, and the only thing that matters is for the file to be a module with at least oneimport/exportstatement, which is bizarre.In any case, developers that aren’t aware of this will benefit from a better documentation—even if it’ll be reiterating the obvious, which, I think, it won’t, because TypeScript’s documentation on module augmentation has never been clear in the first place.
The correct way to go about this is shutting off automatic export, for example:
For example, take a look at how we are doing it for the
@mui/lab: https://github.com/mui/material-ui/blob/master/packages/mui-lab/src/themeAugmentation/components.d.ts