Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[IconButton] Custom color causes TypeError #33054

Open
2 tasks done
emlai opened this issue Jun 7, 2022 · 7 comments
Open
2 tasks done

[IconButton] Custom color causes TypeError #33054

emlai opened this issue Jun 7, 2022 · 7 comments
Labels
component: icon button good first issue new feature

Comments

@emlai
Copy link
Contributor

@emlai emlai commented Jun 7, 2022

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

When I augment IconButton with new colors:

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 like SvgIcon does:

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 🔦

No response

Your environment 🌎

No response
@emlai emlai added the status: needs triage label Jun 7, 2022
@siriwatknp siriwatknp added new feature good first issue component: icon button and removed status: needs triage labels Jun 7, 2022
@siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Jun 7, 2022

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
Copy link
Contributor Author

@emlai emlai commented Jun 7, 2022 •
edited

The customization capability is not complete.

Ah that explains it.

I worked around it by passing the color to the icon component instead:

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

@Shubhamchinda
Copy link
Contributor

@Shubhamchinda Shubhamchinda commented Jun 8, 2022

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

@emlai
Copy link
Contributor Author

@emlai emlai commented Jun 8, 2022

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

@Shubhamchinda
Copy link
Contributor

@Shubhamchinda Shubhamchinda commented Jun 10, 2022

@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
Copy link

@geraldaddey geraldaddey commented Jun 21, 2022 •
edited

@Shubhamchinda @emlai

Any progress? Would love to implement this PR

@Shubhamchinda
Copy link
Contributor

@Shubhamchinda Shubhamchinda commented Jun 23, 2022 •
edited

@Shubhamchinda @emlai

Any progress? Would love to implement this PR

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: icon button good first issue new feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@emlai @siriwatknp @Shubhamchinda @geraldaddey