diff --git a/docs/pages/api-docs/alert.json b/docs/pages/api-docs/alert.json
index 4cbe542220066d..dac98c4ef6cbc2 100644
--- a/docs/pages/api-docs/alert.json
+++ b/docs/pages/api-docs/alert.json
@@ -6,8 +6,8 @@
"closeText": { "type": { "name": "string" }, "default": "'Close'" },
"color": {
"type": {
- "name": "enum",
- "description": "'error'
| 'info'
| 'success'
| 'warning'"
+ "name": "union",
+ "description": "'error'
| 'info'
| 'success'
| 'warning'
| string"
}
},
"icon": { "type": { "name": "node" } },
diff --git a/packages/material-ui/src/Alert/Alert.d.ts b/packages/material-ui/src/Alert/Alert.d.ts
index e54b4319f14deb..c442d20af86369 100644
--- a/packages/material-ui/src/Alert/Alert.d.ts
+++ b/packages/material-ui/src/Alert/Alert.d.ts
@@ -5,10 +5,12 @@ import { InternalStandardProps as StandardProps, Theme } from '..';
import { PaperProps } from '../Paper';
import { AlertClasses } from './alertClasses';
-export type Color = 'success' | 'info' | 'warning' | 'error';
+export type AlertColor = 'success' | 'info' | 'warning' | 'error';
export interface AlertPropsVariantOverrides {}
+export interface AlertPropsColorOverrides {}
+
export interface AlertProps extends StandardProps {
/**
* The action to display. It renders after the message, at the end of the alert.
@@ -28,12 +30,12 @@ export interface AlertProps extends StandardProps {
/**
* The main color for the alert. Unless provided, the value is taken from the `severity` prop.
*/
- color?: Color;
+ color?: OverridableStringUnion;
/**
* The severity of the alert. This defines the color and icon used.
* @default 'success'
*/
- severity?: Color;
+ severity?: AlertColor;
/**
* Override the icon displayed before the children.
* Unless provided, the icon is mapped to the value of the `severity` prop.
@@ -50,11 +52,10 @@ export interface AlertProps extends StandardProps {
* If you wish to change this mapping, you can provide your own.
* Alternatively, you can use the `icon` prop to override the icon displayed.
*/
- iconMapping?: Partial>;
+ iconMapping?: Partial>;
/**
* Callback fired when the component requests to be closed.
* When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.
- *
* @param {object} event The event source of the callback.
*/
onClose?: (event: React.SyntheticEvent) => void;
diff --git a/packages/material-ui/src/Alert/Alert.js b/packages/material-ui/src/Alert/Alert.js
index 796b3e984b6794..f13e17cd535d92 100644
--- a/packages/material-ui/src/Alert/Alert.js
+++ b/packages/material-ui/src/Alert/Alert.js
@@ -141,9 +141,9 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
const styleProps = {
...props,
- variant,
color,
severity,
+ variant,
};
const classes = useUtilityClasses(styleProps);
@@ -215,7 +215,10 @@ Alert.propTypes /* remove-proptypes */ = {
/**
* The main color for the alert. Unless provided, the value is taken from the `severity` prop.
*/
- color: PropTypes.oneOf(['error', 'info', 'success', 'warning']),
+ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+ PropTypes.oneOf(['error', 'info', 'success', 'warning']),
+ PropTypes.string,
+ ]),
/**
* Override the icon displayed before the children.
* Unless provided, the icon is mapped to the value of the `severity` prop.
@@ -236,7 +239,6 @@ Alert.propTypes /* remove-proptypes */ = {
/**
* Callback fired when the component requests to be closed.
* When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.
- *
* @param {object} event The event source of the callback.
*/
onClose: PropTypes.func,