[docs] Port mui#13428 to typescript

Author: eps1lon

.size-limit.js

@@ -28,7 +28,7 @@ module.exports = [
     name: 'The main docs bundle',
     webpack: false,
     path: main.path,
-    limit: '184.3 KB',
+    limit: '184.6 KB',
   },
   {
     name: 'The docs home page',

docs/src/pages/demos/text-fields/CustomizedInputs.tsx

@@ -36,6 +36,12 @@ const styles = (theme: Theme) =>
         borderBottomColor: purple[500],
       },
     },
+    cssOutlinedInput: {
+      '&$cssFocused $notchedOutline': {
+        borderColor: purple[500],
+      },
+    },
+    notchedOutline: {},
     bootstrapRoot: {
       'label + &': {
         marginTop: theme.spacing.unit * 3,
@@ -87,26 +93,51 @@ function CustomizedInputs(props: Props) {
     <div className={classes.container}>
       <FormControl className={classes.margin}>
         <InputLabel
-          htmlFor="custom-css-input"
-          FormLabelClasses={{
+          htmlFor="custom-css-standard-input"
+          classes={{
             root: classes.cssLabel,
             focused: classes.cssFocused,
           }}
         >
           Custom CSS
         </InputLabel>
         <Input
-          id="custom-css-input"
+          id="custom-css-standard-input"
           classes={{
             underline: classes.cssUnderline,
           }}
         />
       </FormControl>
+      <TextField
+        className={classes.margin}
+        InputLabelProps={{
+          classes: {
+            root: classes.cssLabel,
+            focused: classes.cssFocused,
+          },
+        }}
+        InputProps={{
+          classes: {
+            root: classes.cssOutlinedInput,
+            focused: classes.cssFocused,
+            notchedOutline: classes.notchedOutline,
+          },
+        }}
+        label="Custom CSS"
+        variant="outlined"
+        id="custom-css-outlined-input"
+      />
       <MuiThemeProvider theme={theme}>
         <TextField
           className={classes.margin}
           label="MuiThemeProvider"
-          id="mui-theme-provider-input"
+          id="mui-theme-provider-standard-input"
+        />
+        <TextField
+          className={classes.margin}
+          label="MuiThemeProvider"
+          variant="outlined"
+          id="mui-theme-provider-outlined-input"
         />
       </MuiThemeProvider>
       <FormControl className={classes.margin}>

packages/material-ui/src/InputLabel/InputLabel.d.ts

@@ -15,11 +15,14 @@ export interface InputLabelProps extends StandardProps<FormLabelProps, InputLabe
 
 export type InputLabelClassKey =
   | 'root'
+  | 'focused'
+  | 'disabled'
+  | 'error'
+  | 'required'
   | 'formControl'
   | 'marginDense'
   | 'shrink'
   | 'animated'
-  | 'contained'
   | 'filled'
   | 'outlined';