[Alert] Migrate to emotion (#24442)

docs/pages/api-docs/alert.json

@@ -26,6 +26,7 @@
       },
       "default": "'success'"
     },
+    "sx": { "type": { "name": "object" } },
     "variant": {
       "type": {
         "name": "union",
@@ -65,5 +66,5 @@
   "filename": "/packages/material-ui/src/Alert/Alert.js",
   "inheritance": { "component": "Paper", "pathname": "/api/paper/" },
   "demos": "<ul><li><a href=\"/components/alert/\">Alert</a></li></ul>",
-  "styledComponent": false
+  "styledComponent": true
 }

docs/translations/api-docs/alert/alert.json

@@ -11,6 +11,7 @@
     "onClose": "Callback fired when the component requests to be closed. When provided and no <code>action</code> prop is set, a close icon button is displayed that triggers the callback when clicked.<br><br><strong>Signature:</strong><br><code>function(event: object) =&gt; void</code><br><em>event:</em> The event source of the callback.",
     "role": "The ARIA role attribute of the element.",
     "severity": "The severity of the alert. This defines the color and icon used.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",
     "variant": "The variant to use."
   },
   "classDescriptions": {

packages/material-ui/src/Alert/Alert.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { OverridableStringUnion } from '@material-ui/types';
-import { InternalStandardProps as StandardProps } from '..';
+import { SxProps } from '@material-ui/system';
+import { InternalStandardProps as StandardProps, Theme } from '..';
 import { PaperProps } from '../Paper';
 
 export type Color = 'success' | 'info' | 'warning' | 'error';
@@ -101,6 +102,10 @@ export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
    * @default 'standard'
    */
   variant?: OverridableStringUnion<AlertVariantDefaults, AlertPropsVariantOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
 export type AlertClassKey = keyof NonNullable<AlertProps['classes']>;