[InputBase] Declare global mui-auto-fill(-cancel) keyframes (#19497)

Author: martinjlowm

docs/src/modules/utils/generateMarkdown.js

@@ -337,6 +337,7 @@ function generateClasses(reactAPI) {
   text = `| Rule name | Global class | Description |
 |:-----|:-------------|:------------|\n`;
   text += reactAPI.styles.classes
+    .filter(cls => cls !== '@global')
     .map(styleRule => {
       const description = reactAPI.styles.descriptions[styleRule];
 

packages/material-ui/src/InputBase/InputBase.js

@@ -28,6 +28,14 @@ export const styles = theme => {
   };
 
   return {
+    '@global': {
+      '@keyframes mui-auto-fill': {
+        from: {},
+      },
+      '@keyframes mui-auto-fill-cancel': {
+        from: {},
+      },
+    },
     /* Styles applied to the root element. */
     root: {
       // Mimics the default input display property used by browsers for an input.
@@ -87,7 +95,7 @@ export const styles = theme => {
       // Make the flex item shrink with Firefox
       minWidth: 0,
       width: '100%', // Fix IE 11 width issue
-      animationName: '$auto-fill-cancel',
+      animationName: 'mui-auto-fill-cancel',
       '&::-webkit-input-placeholder': placeholder,
       '&::-moz-placeholder': placeholder, // Firefox 19+
       '&:-ms-input-placeholder': placeholder, // IE 11
@@ -119,15 +127,9 @@ export const styles = theme => {
       },
       '&:-webkit-autofill': {
         animationDuration: '5000s',
-        animationName: '$auto-fill',
+        animationName: 'mui-auto-fill',
       },
     },
-    '@keyframes auto-fill': {
-      from: {},
-    },
-    '@keyframes auto-fill-cancel': {
-      from: {},
-    },
     /* Styles applied to the `input` element if `margin="dense"`. */
     inputMarginDense: {
       paddingTop: 4 - 1,
@@ -387,9 +389,7 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
 
   const handleAutoFill = event => {
     // Provide a fake value as Chrome might not let you access it for security reasons.
-    checkDirty(
-      event.animationName.indexOf('auto-fill-cancel') !== -1 ? inputRef.current : { value: 'x' },
-    );
+    checkDirty(event.animationName === 'mui-auto-fill-cancel' ? inputRef.current : { value: 'x' });
   };
 
   React.useEffect(() => {