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.
Can't augment common colors of theme palette anymore
See original GitHub issue- 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 😯
I couldn’t find a way to augment the common key of a Palette anymore.
Expected Behavior 🤔
That it is possible like before.
Steps to Reproduce 🕹
Material-UI 4.9.5: https://codesandbox.io/s/peaceful-hodgkin-i05mi (working) Material-UI 4.9.6: https://codesandbox.io/s/nameless-sun-r7nrv (not working)
Context 🔦
After upgrade to 4.9.6 of Material UI our builds started to break.
In version 4.9.6 the common colors are exported from @material-ui/core/colors/common as default and with their name CommonColors as well. This made it possible to augment the types.
Sadly TypeScript doesn’t allow augmentation of default exports. That’s why it isn’t possible in 4.9.6 anymore since CommonColors is gone and a const named common is just exported as default.
Please see https://github.com/Microsoft/TypeScript/issues/14080 as reference for the mentioned TypeScript issue.
I also can’t augment Palette directly since with augmentation we can’t redefine an already defined key of the Palette.
I’m also wondering why the interface was removed. Before there was the interface, a type variable called common and the default export. By just getting the interface back and exported by its name like before this issue would be fixed.
Your Environment 🌎
| Tech | Version |
|---|---|
| Material-UI | v4.9.6 |
| TypeScript | 4.8 |
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:17 (11 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
You should only augment what you actually change. In your case you told typescript that you somehow changed
import { common } from '@material-ui/core/colors'. You probably didn’t use this in your codebase to begin with which made the type change harmless. It’s nevertheless unsound if you don’t actually patch the runtime.Augmenting the theme is less harmful since we assume that you change the context value accordingly.
You can’t augment
core/colorsanyway. If you patch your local node_modules/ then you’re on your own.Maybe you tried to augment colors the Theme? https://material-ui.com/guides/typescript/#customization-of-theme should help you achieve that.