[InputBase] Add prop for disabling global styles (#29213)

mui · Dec 13, 2021 · e36634c · e36634c
1 parent 9f2e115
commit e36634c
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/docs/pages/api-docs/input-base.json b/docs/pages/api-docs/input-base.json
@@ -16,6 +16,7 @@
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
+    "disableInjectingGlobalStyles": { "type": { "name": "bool" } },
     "endAdornment": { "type": { "name": "node" } },
     "error": { "type": { "name": "bool" } },
     "fullWidth": { "type": { "name": "bool" } },

diff --git a/docs/translations/api-docs/input-base/input-base.json b/docs/translations/api-docs/input-base/input-base.json
@@ -9,6 +9,7 @@
     "componentsProps": "The props used for each slot inside the Input.",
     "defaultValue": "The default value. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the component is disabled. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
+    "disableInjectingGlobalStyles": "If <code>true</code>, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application. This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once.",
     "endAdornment": "End <code>InputAdornment</code> for this component.",
     "error": "If <code>true</code>, the <code>input</code> will indicate an error. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
     "fullWidth": "If <code>true</code>, the <code>input</code> will take up the full width of its container.",

diff --git a/packages/mui-material/src/InputBase/InputBase.d.ts b/packages/mui-material/src/InputBase/InputBase.d.ts
@@ -70,6 +70,12 @@ export interface InputBaseProps
    * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
   disabled?: boolean;
+  /**
+   * If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application.
+   * This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once.
+   * @default false
+   */
+  disableInjectingGlobalStyles?: boolean;
   /**
    * End `InputAdornment` for this component.
    */

diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js
@@ -240,6 +240,7 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
     componentsProps = {},
     defaultValue,
     disabled,
+    disableInjectingGlobalStyles,
     endAdornment,
     error,
     fullWidth = false,
@@ -491,7 +492,7 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
 
   return (
     <React.Fragment>
-      {inputGlobalStyles}
+      {!disableInjectingGlobalStyles && inputGlobalStyles}
       <Root
         {...rootProps}
         {...(!isHostComponent(Root) && {
@@ -605,6 +606,12 @@ InputBase.propTypes /* remove-proptypes */ = {
    * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
   disabled: PropTypes.bool,
+  /**
+   * If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application.
+   * This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once.
+   * @default false
+   */
+  disableInjectingGlobalStyles: PropTypes.bool,
   /**
    * End `InputAdornment` for this component.
    */