diff --git a/docs/pages/api-docs/input-base.json b/docs/pages/api-docs/input-base.json
index d3db102dc0de55..ba17b9351b3002 100644
--- 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
index f2c1da53728cbf..fe910da85a9c1e 100644
--- 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 true
, the component is disabled. The prop defaults to the value (false
) inherited from the parent FormControl component.",
+ "disableInjectingGlobalStyles": "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.",
"endAdornment": "End InputAdornment
for this component.",
"error": "If true
, the input
will indicate an error. The prop defaults to the value (false
) inherited from the parent FormControl component.",
"fullWidth": "If true
, the input
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
index ad3a9ae5d7f5ea..257385215b9d3b 100644
--- 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
index 7f5885f2d792e3..9b4de8c2f469e3 100644
--- 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 (
- {inputGlobalStyles}
+ {!disableInjectingGlobalStyles && inputGlobalStyles}