[material-ui][InputBase] Use globalCss for Pigment integration (mui…

…#42431)
joserodolfofreitas · Jul 29, 2024 · ef5001a · ef5001a
1 parent 1037e83
commit ef5001a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js
@@ -11,11 +11,10 @@ import composeClasses from '@mui/utils/composeClasses';
 import formControlState from '../FormControl/formControlState';
 import FormControlContext from '../FormControl/FormControlContext';
 import useFormControl from '../FormControl/useFormControl';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled, createUseThemeProps, globalCss } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import useForkRef from '../utils/useForkRef';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
-import GlobalStyles from '../GlobalStyles';
 import { isFilled } from './utils';
 import inputBaseClasses, { getInputBaseUtilityClass } from './inputBaseClasses';
 
@@ -185,8 +184,6 @@ export const InputBaseInput = styled('input', {
     // Make the flex item shrink with Firefox
     minWidth: 0,
     flexGrow: 1,
-    animationName: 'mui-auto-fill-cancel',
-    animationDuration: '10ms',
     '&::-webkit-input-placeholder': placeholder,
     '&::-moz-placeholder': placeholder, // Firefox 19+
     '&::-ms-input-placeholder': placeholder, // Edge
@@ -214,11 +211,18 @@ export const InputBaseInput = styled('input', {
       opacity: 1, // Reset iOS opacity
       WebkitTextFillColor: (theme.vars || theme).palette.text.disabled, // Fix opacity Safari bug
     },
-    '&:-webkit-autofill': {
-      animationDuration: '5000s',
-      animationName: 'mui-auto-fill',
-    },
     variants: [
+      {
+        props: ({ ownerState }) => !ownerState.disableInjectingGlobalStyles,
+        style: {
+          animationName: 'mui-auto-fill-cancel',
+          animationDuration: '10ms',
+          '&:-webkit-autofill': {
+            animationDuration: '5000s',
+            animationName: 'mui-auto-fill',
+          },
+        },
+      },
       {
         props: {
           size: 'small',
@@ -248,14 +252,10 @@ export const InputBaseInput = styled('input', {
   };
 });
 
-const inputGlobalStyles = (
-  <GlobalStyles
-    styles={{
-      '@keyframes mui-auto-fill': { from: { display: 'block' } },
-      '@keyframes mui-auto-fill-cancel': { from: { display: 'block' } },
-    }}
-  />
-);
+const InputGlobalStyles = globalCss({
+  '@keyframes mui-auto-fill': { from: { display: 'block' } },
+  '@keyframes mui-auto-fill-cancel': { from: { display: 'block' } },
+});
 
 /**
  * `InputBase` contains as few styles as possible.
@@ -525,7 +525,12 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
 
   return (
     <React.Fragment>
-      {!disableInjectingGlobalStyles && inputGlobalStyles}
+      {!disableInjectingGlobalStyles && typeof InputGlobalStyles === 'function' && (
+        // For Emotion/Styled-components, InputGlobalStyles will be a function
+        // For Pigment CSS, this has no effect because the InputGlobalStyles will be null.
+        <InputGlobalStyles />
+      )}
+
       <Root
         {...rootProps}
         ref={ref}

diff --git a/...ges/mui-material/src/zero-styled/index.ts → ...es/mui-material/src/zero-styled/index.tsx b/...ges/mui-material/src/zero-styled/index.ts → ...es/mui-material/src/zero-styled/index.tsx
@@ -1,10 +1,18 @@
+import * as React from 'react';
 import { extendSxProp } from '@mui/system/styleFunctionSx';
 import useThemeProps from '../styles/useThemeProps';
+import GlobalStyles, { GlobalStylesProps } from '../GlobalStyles';
 
 export { css, keyframes } from '@mui/system';
 
 export { default as styled } from '../styles/styled';
 
+export function globalCss(styles: GlobalStylesProps['styles']) {
+  return function GlobalStylesWrapper() {
+    return <GlobalStyles styles={styles} />;
+  };
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function createUseThemeProps(name: string) {
   return useThemeProps;