[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']>;