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}