Multiple declare module '@mui/material/Button' don't work
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
The current advise is to use the following code
declare module '@mui/material/Button' {
interface ButtonPropsVariantOverrides {
pill2: true
}
}
This works if they are in the same file, you can see that pill2 is recognized:
If I move the second declaration to another file it isn’t picked up anymore:
If I replace the import paths with '@mui/material/Button/Button'
it works as expected:
Expected behavior 🤔
The documentation should probably advise the following code:
declare module '@mui/material/Button/Button' {
interface ButtonPropsVariantOverrides {
pill2: true
}
}
Steps to reproduce 🕹
See screenshots in Current behavior.
Context 🔦
We have some base declarations we want to make and allow ‘implementors’ add new declarations.
Your environment 🌎
`npx @mui/envinfo`
System:
OS: macOS 12.2.1
Binaries:
Node: 14.19.0 - ~/.nvm/versions/node/v14.19.0/bin/node
Yarn: 1.19.1 - ~/.nvm/versions/node/v14.19.0/bin/yarn
npm: 6.14.16 - ~/.nvm/versions/node/v14.19.0/bin/npm
Browsers:
Chrome: 99.0.4844.51
Edge: 99.0.1150.36
Firefox: Not Found
Safari: 15.3
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:7 (2 by maintainers)
Top Results From Across the Web
Extend material-ui component in typescript - Stack Overflow
Attempt2: Trying to overwrite the ButtonTypeMap instead of the Button but that doesn't help either. declare module '@material-ui/core/Button' { ...
Read more >Typescript Shorts - Module Augmentation - Karthikeyan's Blog
Hello everyone, In this blog post, we are going to learn about a concept is typescript which is called module augmentation. Don't freak...
Read more >Documentation - Modules - TypeScript
Any declaration (such as a variable, function, class, type alias, or interface) can be exported by adding the export keyword. StringValidator.ts. ts. export ......
Read more >Introducing MUI Core v5.0
It is based on this context that we started to work on v5 in 2019. ... the Button's color prop options declare module...
Read more >[Solved]-Creating custom variants with Material-UI-Reactjs
Two options are possible, it dont work cause you destruct "variant" and don't forward it to your ... declare module '@mui/material/Button' { interface ......
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 FreeTop 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
Top GitHub Comments
I had the same issue and I fixed it by wrapping into
declare global
:I believe the issue is caused not by multiple declarations. I use only a single declaration for Button, which is located in a separate file and it doesn’t work as well.
As was mentioned,
@mui/material/Button/Button
works across the project, while simple@mui/material/Button
located in a separate file - doesn’t.