diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js
index 1ada0bca32feae..76b63dcbf4504b 100644
--- a/packages/mui-material/src/IconButton/IconButton.js
+++ b/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,
+ },
+ };
+ },
);
/**
diff --git a/packages/mui-material/src/IconButton/IconButton.test.js b/packages/mui-material/src/IconButton/IconButton.test.js
index f57b847f0ca388..18ecfdf197b7cd 100644
--- a/packages/mui-material/src/IconButton/IconButton.test.js
+++ b/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('', () => {
);
}).toErrorDev(['MUI: You are providing an onClick event listener']);
});
+
+ it('should not throw error for a custom color', () => {
+ expect(() => (
+
+
+
+ )).not.to.throw();
+ });
});