question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multiple declare module '@mui/material/Button' don't work

See original GitHub issue

Duplicates

  • 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: Schermafbeelding 2022-03-08 om 14 04 14

If I move the second declaration to another file it isn’t picked up anymore: Schermafbeelding 2022-03-08 om 13 54 03

If I replace the import paths with '@mui/material/Button/Button' it works as expected: Schermafbeelding 2022-03-08 om 13 56 06

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:open
  • Created 2 years ago
  • Reactions:1
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
jmascommented, Jun 25, 2022

I had the same issue and I fixed it by wrapping into declare global:

declare global {
  declare module "@mui/material/Button" {
    interface ButtonPropsVariantOverrides {
      special: true;
      footer: true;
    }
  }

  declare module "@mui/material/Typography" {
    interface TypographyPropsVariantOverrides {
      h1: true;
      h2: true;
      h3: false;
      h4: false;
      h5: false;
      h6: false;
    }
  }
}
1reaction
rus-yurchenkocommented, May 31, 2022

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found