[IconButton] custom color causes type error (#34521)

Co-authored-by: siriwatknp <[email protected]>

Author: kushagra010

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

@@ -69,40 +69,43 @@ const IconButtonRoot = styled(ButtonBase, {
       marginRight: ownerState.size === 'small' ? -3 : -12,
     }),
   }),
-  ({ theme, ownerState }) => ({
-    ...(ownerState.color === 'inherit' && {
-      color: 'inherit',
-    }),
-    ...(ownerState.color !== 'inherit' &&
-      ownerState.color !== 'default' && {
-        color: (theme.vars || theme).palette[ownerState.color].main,
-        ...(!ownerState.disableRipple && {
-          '&:hover': {
-            backgroundColor: theme.vars
-              ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${
-                  theme.vars.palette.action.hoverOpacity
-                })`
-              : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-            // Reset on touch devices, it doesn't add specificity
-            '@media (hover: none)': {
-              backgroundColor: 'transparent',
+  ({ theme, ownerState }) => {
+    const palette = (theme.vars || theme).palette?.[ownerState.color];
+    return {
+      ...(ownerState.color === 'inherit' && {
+        color: 'inherit',
+      }),
+      ...(ownerState.color !== 'inherit' &&
+        ownerState.color !== 'default' && {
+          color: palette?.main,
+          ...(!ownerState.disableRipple && {
+            '&:hover': {
+              ...(palette && {
+                backgroundColor: theme.vars
+                  ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})`
+                  : alpha(palette.main, theme.palette.action.hoverOpacity),
+              }),
+              // Reset on touch devices, it doesn't add specificity
+              '@media (hover: none)': {
+                backgroundColor: 'transparent',
+              },
             },
-          },
+          }),
         }),
+      ...(ownerState.size === 'small' && {
+        padding: 5,
+        fontSize: theme.typography.pxToRem(18),
       }),
-    ...(ownerState.size === 'small' && {
-      padding: 5,
-      fontSize: theme.typography.pxToRem(18),
-    }),
-    ...(ownerState.size === 'large' && {
-      padding: 12,
-      fontSize: theme.typography.pxToRem(28),
-    }),
-    [`&.${iconButtonClasses.disabled}`]: {
-      backgroundColor: 'transparent',
-      color: (theme.vars || theme).palette.action.disabled,
-    },
-  }),
+      ...(ownerState.size === 'large' && {
+        padding: 12,
+        fontSize: theme.typography.pxToRem(28),
+      }),
+      [`&.${iconButtonClasses.disabled}`]: {
+        backgroundColor: 'transparent',
+        color: (theme.vars || theme).palette.action.disabled,
+      },
+    };
+  },
 );
 
 /**

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import PropTypes from 'prop-types';
 import { createRenderer, describeConformance } from 'test/utils';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import IconButton, { iconButtonClasses as classes } from '@mui/material/IconButton';
 import Icon from '@mui/material/Icon';
 import ButtonBase from '@mui/material/ButtonBase';
@@ -100,4 +101,22 @@ describe('<IconButton />', () => {
       );
     }).toErrorDev(['MUI: You are providing an onClick event listener']);
   });
+
+  it('should not throw error for a custom color', () => {
+    expect(() => (
+      <ThemeProvider
+        theme={createTheme({
+          components: {
+            MuiIconButton: {
+              defaultProps: {
+                color: 'custom',
+              },
+            },
+          },
+        })}
+      >
+        <IconButton />
+      </ThemeProvider>
+    )).not.to.throw();
+  });
 });