[IconButton] Custom non-palette color causes TypeError
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
When I augment IconButton
with new colors that don’t exist in the palette:
declare module "@mui/material/IconButton" {
interface IconButtonPropsColorOverrides {
textPrimary: true;
textSecondary: true;
}
}
and then try to use these colors:
<IconButton color="textPrimary">
<CloseIcon />
</IconButton>
My app crashes with:
TypeError: Cannot read properties of undefined (reading 'main')
at the following location:
Expected behavior 🤔
IconButton
doesn’t throw TypeError when using custom color. Instead it handles it safely, like SvgIcon
:
Steps to reproduce 🕹
No response
Context 🔦
We intend for color="textPrimary"
(or color="text.primary"
, both are fine) to use the text.primary
palette color.
Workaround: pass the color to the icon component instead and augment SvgIconPropsColorOverrides
typings:
<IconButton>
<CloseIcon color="textPrimary" />
</IconButton>
Your environment 🌎
No response
Issue Analytics
- State:
- Created a year ago
- Comments:33 (20 by maintainers)
Top Results From Across the Web
color is undefined || MUI Button & CreateTheme Issue - Stack ...
I was able to determine that the issue was the way I had defined the "text" color within createTheme. Original theme.js text: "#000000",....
Read more >IconButton API - Material UI - MUI
The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization...
Read more >IconButton class - material library - Flutter - Dart API docs
An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink). Icon buttons are...
Read more >PolymerElements/paper-icon-button - webcomponents.org
You may customize the color using the --paper-icon-button-ink-color ... True if the input device that caused the element to receive focus was a...
Read more >IconButton - Gestalt is Pinterest's design system
Primary colors to apply to the IconButton background. See background color variant to learn ... See custom icon variant to learn more. disabled....
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
Hi is anyone working one this .I’d like to take it. @emlai
The PR to fix this issue should:
@ZeeshanTamboli if you are available, this could be one to pick up.