[TextField] Migrate InputBase to emotion (mui#24555)

eps1lon · Jan 25, 2021 · 8fa3883 · 8fa3883
1 parent 2dc155d
commit 8fa3883
Show file tree

Hide file tree

Showing 9 changed files with 326 additions and 208 deletions.
diff --git a/docs/pages/api-docs/input-base.json b/docs/pages/api-docs/input-base.json
@@ -29,6 +29,7 @@
     "rows": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
     "size": { "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" } },
     "startAdornment": { "type": { "name": "node" } },
+    "sx": { "type": { "name": "object" } },
     "type": { "type": { "name": "string" }, "default": "'text'" },
     "value": { "type": { "name": "any" } }
   },
@@ -63,6 +64,6 @@
   "filename": "/packages/material-ui/src/InputBase/InputBase.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/text-fields/\">Text Fields</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }
diff --git a/docs/translations/api-docs/input-base/input-base.json b/docs/translations/api-docs/input-base/input-base.json
@@ -27,6 +27,7 @@
     "rows": "Number of rows to display when multiline option is set to true.",
     "size": "The size of the component.",
     "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."
   },

diff --git a/packages/material-ui/src/InputBase/InputBase.d.ts b/packages/material-ui/src/InputBase/InputBase.d.ts
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
+import { Theme } from '../styles';
 import { InternalStandardProps as StandardProps } from '..';
 
 export interface InputBaseProps
@@ -186,6 +188,10 @@ export interface InputBaseProps
    * Start `InputAdornment` for this component.
    */
   startAdornment?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
    * @default 'text'