[IconButton] Custom non-palette color causes TypeError #33054

emlai · 2022-06-07T09:27:22Z

Duplicates

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:

material-ui/packages/mui-material/src/IconButton/IconButton.js

Line 78 in dec32b3

color: (theme.vars || theme).palette[ownerState.color].main,

Expected behavior 🤔

IconButton doesn't throw TypeError when using custom color. Instead it handles it safely, like SvgIcon:

material-ui/packages/mui-material/src/SvgIcon/SvgIcon.js

Line 54 in dec32b3

(theme.vars || theme).palette?.[ownerState.color]?.main ??

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

The text was updated successfully, but these errors were encountered:

siriwatknp · 2022-06-07T11:46:26Z

The customization capability is not complete. I marked this as an enhancement.

The fix can use optional chaining like in SvgIcon. However, please note that when you customize the color prop, you are opting out of the theme palette so you have to style by:

createTheme({
  components: {
    MuiIconButton: {
      root:  ({ ownerState, theme }) => ({
        ...ownerState.color === 'textPrimary' && {
          // your style
        }
      })
    }
  }
})

emlai · 2022-06-07T12:39:40Z

The customization capability is not complete.

Ah that explains it.

I worked around it by passing the color to the icon component instead, and augmenting SvgIconPropsColorOverrides:

<IconButton>
  <CloseIcon color="textPrimary" />
</IconButton>

Shubhamchinda · 2022-06-08T01:02:12Z

Is this issue open to working on?
I'd like to take it. @emlai

emlai · 2022-06-08T11:56:50Z

@Shubhamchinda I don't think it's being worked on, so feel free to take it. Thank you!

Shubhamchinda · 2022-06-10T02:07:53Z

@Shubhamchinda I don't think it's being worked on, so feel free to take it. Thank you!

Great, thanks. I'll take this.

geraldaddey · 2022-06-21T15:38:21Z

@Shubhamchinda @emlai

Any progress? Would love to implement this PR

Shubhamchinda · 2022-06-23T08:15:13Z

@Shubhamchinda @emlai

Any progress? Would love to implement this PR

@geraldaddey Give me a day, and I'll submit a PR.

shachargiladi · 2022-07-23T21:34:47Z

Is this issue still open to work on? Would like to work on it

emlai · 2022-07-24T12:18:18Z

@shachargiladi 4 weeks since the last response, so I think it was abandoned. I'd say go ahead!

hilalsidhic · 2022-08-06T17:34:18Z

Hi is anyone working one this .I'd like to take it. @emlai

cyberGHostJs · 2022-08-08T22:11:56Z

Hi is anyone working one this? I'd like to take it.
@emlai

rizamoyi · 2022-09-08T10:20:01Z

Hi anyone still working on this? I'd like to take it. @emlai @cyberGHostJs @hilalsidhic

kushagra010 · 2022-09-08T11:46:18Z

Hey, doesn't seems to be an issue for me 🤔 . I was thinking to pick this up, but it didn't reproduce for me.
@emlai

kushagra010 · 2022-09-08T13:21:37Z

My bad, reproducible. @rizamoyi have you started work on it or are you working on it? If not, I can pick this up.

rizamoyi · 2022-09-08T13:38:13Z

@kushagra010 I started working on it.

harsh5902 · 2022-09-15T08:36:56Z

is this issue still on or can take it over and work on it?

rizamoyi · 2022-09-15T11:04:58Z

@harsh5902 you can take it over

harsh5902 · 2022-09-18T12:18:25Z

I have solved the this problem and created a pull request, please do review it.

paintoshi · 2022-09-28T19:19:43Z

@harsh5902 Why was the PR closed?

siriwatknp · 2022-09-29T04:30:34Z

The PR to fix this issue should:

custom color works with TypeScript
make sure that the custom color does not crash
add a demo to show that the color prop can be augmented

@ZeeshanTamboli if you are available, this could be one to pick up.

ZeeshanTamboli · 2022-09-29T06:21:35Z

@ZeeshanTamboli if you are available, this could be one to pick up.

I am on a bit of a break currently and won't be working next 3-4 weeks much effectively. If somebody else wants to take a look till then, please go ahead.

the-mgi · 2022-09-29T16:51:43Z

this is working fine i guess, i just tested it.
at first you need to provide the props in Palette and PaletteOptions interface that lies in the @mui/material/styles/, the color names that you want to add into the project

declare module '@mui/material/styles' {
  interface Palette {
    primaryVariant500: Palette['primary'];
    secondaryVariant500: Palette['primary'];
  }

  interface PaletteOptions {
    primaryVariant500?: PaletteOptions['primary'];
    secondaryVariant500?: PaletteOptions['primary'];
  }
}

and add these lines for IconButton

declare module "@mui/material/IconButton" {
  interface IconButtonPropsColorOverrides {
    primaryVariant500: true;
    secondaryVariant500: true;
  }
}

these enabling the createTheme to be aware of these colors, then you need to provide the implementation in the theme that would be passed in the themeProvider, like so

export const theme = createTheme({
  palette: {
    primaryVariant500: {
      main: '#ff0000'
    },
    secondaryVariant500: {
      main: '#0000ff'
    },
 }
});

because we do want to let the mui know the values of the color.
hope it helps. thanks.

@emlai the problem for you might be that you're not writing up the color prop in createTheme for palette

emlai · 2022-09-29T17:29:49Z

@the-mgi Yes, if your palette has the exact same key as the specified color, then this will work fine.

But we're intending to use color="textPrimary" or color="text.primary" to access the usual text.primary.main that we have in our palette. Currently neither of those work.

the-mgi · 2022-10-01T04:14:56Z

@the-mgi Yes, if your palette has the exact same key as the specified color, then this will work fine.

But we're intending to use color="textPrimary" or color="text.primary" to access the usual text.primary.main that we have in our palette. Currently neither of those work.

got it. thanks.

TCsTheMechanic · 2022-10-19T14:40:27Z

Hello there, is there any work around ? I'm still having the same problem.

mui.d.ts

LightTheme.tsx

Any component that I try to change the color

Actually it works with Typography, but I think it's the only one

@siriwatknp @the-mgi @kushagra010

emlai · 2022-10-21T11:15:39Z

@TCsTheMechanic Workaround for IconButton is to pass the color prop to the icon component instead: #33054 (comment)

TCsTheMechanic · 2022-10-21T12:36:22Z

@emlai also doesn't work

emlai · 2022-10-21T13:25:20Z

@TCsTheMechanic Did you augment the typings:

declare module "@mui/material/SvgIcon" {
  interface SvgIconPropsColorOverrides {
    "textColor.light": true;
  }
}

TCsTheMechanic · 2022-10-21T14:57:05Z

@emlai still nothing, I'm using @mui/icons-material, I don't know if it follows the same module

ZeeshanTamboli · 2022-11-04T07:21:02Z

I am not sure what is the issue here. Custom color does work with typescript with module augmentation and can be augmented. If the custom color is not defined in the palette it will crash.
CodeSandbox: https://codesandbox.io/s/vigorous-bardeen-7pnhv6?file=/src/App.tsx

emlai · 2022-11-04T12:22:22Z

@ZeeshanTamboli

If the custom color is not defined in the palette it will crash.

That is exactly the issue. In our use case the custom color is not in the palette. The same custom color works fine for the icon component. See the original issue description.

ZeeshanTamboli · 2022-11-05T10:26:39Z

@emlai

In our use case the custom color is not in the palette

Then what styles are you applying with the custom color? Why are you calling it with color=textPrimary? What is the use of it without having it in palette?

The same custom color works fine for the icon component.

Yes it works, but if it is not in the palette why should it unnecessarily calculate theme.palette?.color?.main by letting it have nullish check just to prevent crash, but actually not using it?

See the original issue description.

In it you need text.primary palette value, and calling viacolor=text.primary means it's like sx prop syntax and direct sx properties are not supported in IconButton component.

Am I missing something here? Please enlighten me.

siriwatknp · 2022-11-07T03:26:39Z

@ZeeshanTamboli The issue is solid. From my understanding, it is intended that the color prop can be customized from the interface IconButtonPropsColorOverrides but developers get TypeError which is not expected.

This is not about the color value (that's the developers' decision), not our. We just provide a way to extend the color.

This PR will fix the issue: #34521

widersky · 2023-01-10T15:55:08Z

@siriwatknp Hello, it looks like issue still occurs for me. It's working perfectly with Card, SvgIcon and Typography components, but not for Button and IconButton - I have error:

Uncaught TypeError: Cannot read properties of undefined (reading 'type')

(colorManipulator.js:50)

I use latest libs versions:

"@mui/icons-material": "^5.11.0",
"@mui/material": "^5.11.4",
"typescript": "^4.9.4",

I tried to reinstall dependencies by removing node_modules and yarn.lock but it didn't help.

siriwatknp · 2023-01-11T07:56:39Z

@siriwatknp Hello, it looks like issue still occurs for me. It's working perfectly with Card, SvgIcon and Typography components, but not for Button and IconButton - I have error:
Uncaught TypeError: Cannot read properties of undefined (reading 'type')
(colorManipulator.js:50)

I use latest libs versions:
"@mui/icons-material": "^5.11.0",

"@mui/material": "^5.11.4",

"typescript": "^4.9.4",
I tried to reinstall dependencies by removing node_modules and yarn.lock but it didn't help.

Pleasr share a Code sandbox that reproduces the issue.

Charul-Parspec · 2023-04-10T12:45:38Z

@siriwatknp Facing same issue for icons imported from '@icons-material'. module augmentation is not working for @mui/icons-material. @TCsTheMechanic did you resolve the issue ?

nikolay-bennie · 2024-03-21T13:49:18Z

why is the issue closed if the issue is reproducible?

ZeeshanTamboli · 2024-03-22T06:01:02Z

@nikolay-bennie Please provide a reproduction with the latest Material UI version.

erwin-huang · 2024-04-08T04:22:59Z

Hi @siriwatknp @ZeeshanTamboli

I also got this issue

Uncaught TypeError: Cannot read properties of undefined (reading 'type')

To reproduce:

Create a custom palette color, customColor and assign a random color.
Create a custom IconButton color, customColor, and assign random styles.

Note: The "custom palette color name" should be the same as the "custom IconButton color name".

Here is the code sandbox, try to access /issue route to check the issue.
https://codesandbox.io/p/devbox/nextjs-mui-icon-button-mmml75

I think I did the config correctly, didn't I?

emlai added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jun 7, 2022

This was referenced Sep 18, 2022

Added solution for Custom Color iconbutton #34373

Closed

[docs] [components/buttons] added Color customization for icon button #34395

Closed

siriwatknp added bug 🐛 Something doesn't work and removed new feature New feature or request labels Sep 29, 2022

kushagra010 mentioned this issue Sep 29, 2022

[IconButton] custom color causes type error #34521

Merged

1 task

zognin mentioned this issue Oct 22, 2022

[Epic] Style problems backlog Giving-Coupons/giving-coupons#271

Closed

8 tasks

sivayogasubramanian mentioned this issue Oct 23, 2022

Figure out better clear button: IconButton has a current bug in overriding color Giving-Coupons/giving-coupons#283

Closed

siriwatknp mentioned this issue Oct 26, 2022

Component customization and extension related issues #34883

Open

emlai changed the title ~~[IconButton] Custom color causes TypeError~~ [IconButton] Custom non-palette color causes TypeError Nov 4, 2022

michaldudak closed this as completed in #34521 Nov 14, 2022

[IconButton] Custom non-palette color causes TypeError #33054

[IconButton] Custom non-palette color causes TypeError #33054

Comments

emlai commented Jun 7, 2022 • edited

Duplicates

Latest version

Current behavior 😯

Expected behavior 🤔

Steps to reproduce 🕹

Context 🔦

Your environment 🌎

siriwatknp commented Jun 7, 2022

emlai commented Jun 7, 2022 • edited

Shubhamchinda commented Jun 8, 2022

emlai commented Jun 8, 2022

Shubhamchinda commented Jun 10, 2022

geraldaddey commented Jun 21, 2022 • edited

Shubhamchinda commented Jun 23, 2022 • edited

shachargiladi commented Jul 23, 2022

emlai commented Jul 24, 2022

hilalsidhic commented Aug 6, 2022

cyberGHostJs commented Aug 8, 2022

rizamoyi commented Sep 8, 2022

kushagra010 commented Sep 8, 2022 • edited

kushagra010 commented Sep 8, 2022

rizamoyi commented Sep 8, 2022 • edited

harsh5902 commented Sep 15, 2022

rizamoyi commented Sep 15, 2022

harsh5902 commented Sep 18, 2022

paintoshi commented Sep 28, 2022

siriwatknp commented Sep 29, 2022

ZeeshanTamboli commented Sep 29, 2022

the-mgi commented Sep 29, 2022 • edited

emlai commented Sep 29, 2022 • edited

the-mgi commented Oct 1, 2022

TCsTheMechanic commented Oct 19, 2022 • edited

emlai commented Oct 21, 2022

TCsTheMechanic commented Oct 21, 2022 • edited

emlai commented Oct 21, 2022 • edited

TCsTheMechanic commented Oct 21, 2022

ZeeshanTamboli commented Nov 4, 2022

emlai commented Nov 4, 2022

ZeeshanTamboli commented Nov 5, 2022 • edited

siriwatknp commented Nov 7, 2022

widersky commented Jan 10, 2023 • edited

siriwatknp commented Jan 11, 2023

Charul-Parspec commented Apr 10, 2023

nikolay-bennie commented Mar 21, 2024

ZeeshanTamboli commented Mar 22, 2024 • edited

erwin-huang commented Apr 8, 2024

emlai commented Jun 7, 2022 •

edited

emlai commented Jun 7, 2022 •

edited

geraldaddey commented Jun 21, 2022 •

edited

Shubhamchinda commented Jun 23, 2022 •

edited

kushagra010 commented Sep 8, 2022 •

edited

rizamoyi commented Sep 8, 2022 •

edited

the-mgi commented Sep 29, 2022 •

edited

emlai commented Sep 29, 2022 •

edited

TCsTheMechanic commented Oct 19, 2022 •

edited

TCsTheMechanic commented Oct 21, 2022 •

edited

emlai commented Oct 21, 2022 •

edited

ZeeshanTamboli commented Nov 5, 2022 •

edited

widersky commented Jan 10, 2023 •

edited

ZeeshanTamboli commented Mar 22, 2024 •

edited