[TextField] Migrate FilledInput to emotion

docs/pages/api-docs/filled-input.json

@@ -25,6 +25,7 @@
     "required": { "type": { "name": "bool" } },
     "rows": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
     "startAdornment": { "type": { "name": "node" } },
+    "sx": { "type": { "name": "object" } },
     "type": { "type": { "name": "string" }, "default": "'text'" },
     "value": { "type": { "name": "any" } }
   },
@@ -57,6 +58,6 @@
   "filename": "/packages/material-ui/src/FilledInput/FilledInput.js",
   "inheritance": { "component": "InputBase", "pathname": "/api/input-base/" },
   "demos": "<ul><li><a href=\"/components/text-fields/\">Text Fields</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/input-base.json

@@ -4,6 +4,11 @@
     "autoFocus": { "type": { "name": "bool" } },
     "classes": { "type": { "name": "object" } },
     "color": { "type": { "name": "enum", "description": "'primary'<br>&#124;&nbsp;'secondary'" } },
+    "components": {
+      "type": { "name": "shape", "description": "{ Input?: elementType, Root?: elementType }" },
+      "default": "{}"
+    },
+    "componentsProps": { "type": { "name": "object" }, "default": "{}" },
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
     "endAdornment": { "type": { "name": "node" } },

docs/translations/api-docs/filled-input/filled-input.json

@@ -26,6 +26,7 @@
     "required": "If <code>true</code>, the <code>input</code> element is required. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
     "rows": "Number of rows to display when multiline option is set to true.",
     "startAdornment": "Start <code>InputAdornment</code> for this component.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",
     "type": "Type of the <code>input</code> element. It should be <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types\">a valid HTML5 input type</a>.",
     "value": "The value of the <code>input</code> element, required for a controlled component."
   },

docs/translations/api-docs/input-base/input-base.json

@@ -5,6 +5,8 @@
     "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "color": "The color of the component. It supports those theme colors that make sense for this component. The prop defaults to the value (<code>&#39;primary&#39;</code>) inherited from the parent FormControl component.",
+    "components": "The components used for each slot inside the InputBase. Either a string to use a HTML element or a component.",
+    "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.",
     "endAdornment": "End <code>InputAdornment</code> for this component.",

packages/material-ui/src/Autocomplete/Autocomplete.js

@@ -102,7 +102,7 @@ export const styles = (theme) => ({
         padding: '2.5px 4px',
       },
     },
-    '&[class*="MuiFilledInput-root"]': {
+    '&.MuiFilledInput-root': {
       paddingTop: 19,
       paddingLeft: 8,
       '$hasPopupIcon &, $hasClearIcon &': {
@@ -111,16 +111,16 @@ export const styles = (theme) => ({
       '$hasPopupIcon$hasClearIcon &': {
         paddingRight: 52 + 4 + 9,
       },
-      '& $input': {
+      '& .MuiFilledInput-input': {
         padding: '7px 4px',
       },
       '& $endAdornment': {
         right: 9,
       },
     },
-    '&[class*="MuiFilledInput-root"][class*="MuiFilledInput-sizeSmall"]': {
+    '&.MuiFilledInput-root.MuiInputBase-sizeSmall': {
       paddingBottom: 1,
-      '& $input': {
+      '& .MuiFilledInput-input': {
         padding: '2.5px 4px',
       },
     },

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

@@ -1,4 +1,5 @@
-import { InternalStandardProps as StandardProps } from '..';
+import { SxProps } from '@material-ui/system';
+import { InternalStandardProps as StandardProps, Theme } from '..';
 import { InputBaseProps } from '../InputBase';
 
 export interface FilledInputProps extends StandardProps<InputBaseProps> {
@@ -45,6 +46,10 @@ export interface FilledInputProps extends StandardProps<InputBaseProps> {
    * If `true`, the input will not have an underline.
    */
   disableUnderline?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
 export type FilledInputClassKey = keyof NonNullable<FilledInputProps['classes']>;