TextArea change

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

@@ -27,6 +27,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/OutlinedInput/OutlinedInput.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/translations/api-docs/outlined-input/outlined-input.json

@@ -28,6 +28,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."
   },

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

@@ -159,24 +159,24 @@ const AutocompleteRoot = experimentalStyled(
         padding: '2px 4px 3px 0',
       },
     },
-    '&[class*="MuiOutlinedInput-root"]': {
+    '&.MuiOutlinedInput-root': {
       padding: 9,
       [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
         paddingRight: 26 + 4 + 9,
       },
       [`.${autocompleteClasses.hasPopupIcon}.${autocompleteClasses.hasClearIcon}&`]: {
         paddingRight: 52 + 4 + 9,
       },
-      [`& .${autocompleteClasses.input}`]: {
+      '& .MuiOutlinedInput-input': {
         padding: '7.5px 4px 7.5px 6px',
       },
       [`& .${autocompleteClasses.endAdornment}`]: {
         right: 9,
       },
     },
-    '&[class*="MuiOutlinedInput-root"][class*="MuiOutlinedInput-sizeSmall"]': {
+    '&.MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
       padding: 6,
-      [`& .${autocompleteClasses.input}`]: {
+      '& .MuiOutlinedInput-input': {
         padding: '2.5px 4px 2.5px 6px',
       },
     },

packages/material-ui/src/OutlinedInput/NotchedOutline.js

@@ -1,39 +1,43 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
 import useTheme from '../styles/useTheme';
 import capitalize from '../utils/capitalize';
+import experimentalStyled from '../styles/experimentalStyled';
 
-export const styles = (theme) => {
+const NotchedOutlineRoot = experimentalStyled(
+  'fieldset',
+  {},
+  { name: 'PrivateNotchedOutline', slot: 'Root' },
+)(() => ({
+  textAlign: 'left',
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  top: -5,
+  left: 0,
+  margin: 0,
+  padding: '0 8px',
+  pointerEvents: 'none',
+  borderRadius: 'inherit',
+  borderStyle: 'solid',
+  borderWidth: 1,
+  overflow: 'hidden',
+}));
+const NotchedOutlineLegend = experimentalStyled(
+  'legend',
+  {},
+  { name: 'PrivateNotchedOutline', slot: 'Legend' },
+)(({ styleProps, theme }) => {
   return {
-    /* Styles applied to the root element. */
-    root: {
-      textAlign: 'left',
-      position: 'absolute',
-      bottom: 0,
-      right: 0,
-      top: -5,
-      left: 0,
-      margin: 0,
-      padding: '0 8px',
-      pointerEvents: 'none',
-      borderRadius: 'inherit',
-      borderStyle: 'solid',
-      borderWidth: 1,
-      overflow: 'hidden',
-    },
-    /* Styles applied to the legend element when `labelWidth` is provided. */
-    legend: {
+    ...(styleProps.label === undefined && {
       padding: 0,
       lineHeight: '11px', // sync with `height` in `legend` styles
       transition: theme.transitions.create('width', {
         duration: 150,
         easing: theme.transitions.easing.easeOut,
       }),
-    },
-    /* Styles applied to the legend element. */
-    legendLabelled: {
+    }),
+    ...(styleProps.label !== undefined && {
       display: 'block',
       width: 'auto',
       padding: 0,
@@ -50,18 +54,17 @@ export const styles = (theme) => {
         paddingRight: 5,
         display: 'inline-block',
       },
-    },
-    /* Styles applied to the legend element is notched. */
-    legendNotched: {
-      maxWidth: 1000,
-      transition: theme.transitions.create('max-width', {
-        duration: 100,
-        easing: theme.transitions.easing.easeOut,
-        delay: 50,
+      ...(styleProps.notched && {
+        maxWidth: 1000,
+        transition: theme.transitions.create('max-width', {
+          duration: 100,
+          easing: theme.transitions.easing.easeOut,
+          delay: 50,
+        }),
       }),
-    },
+    }),
   };
-};
+});
 
 /**
  * @ignore - internal component.
@@ -79,21 +82,22 @@ const NotchedOutline = React.forwardRef(function NotchedOutline(props, ref) {
   } = props;
   const theme = useTheme();
   const align = theme.direction === 'rtl' ? 'right' : 'left';
-
+  const styleProps = {
+    ...props,
+    notched,
+    label,
+  };
   if (label !== undefined) {
     return (
-      <fieldset
+      <NotchedOutlineRoot
         aria-hidden
-        className={clsx(classes.root, className)}
+        className={className}
         ref={ref}
         style={style}
+        styleProps={styleProps}
         {...other}
       >
-        <legend
-          className={clsx(classes.legendLabelled, {
-            [classes.legendNotched]: notched,
-          })}
-        >
+        <NotchedOutlineLegend styleProps={styleProps}>
           {/* Use the nominal use case of the legend, avoid rendering artefacts. */}
           {label ? (
             <span>{label}</span>
@@ -102,27 +106,28 @@ const NotchedOutline = React.forwardRef(function NotchedOutline(props, ref) {
             // eslint-disable-next-line react/no-danger
             <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
           )}
-        </legend>
-      </fieldset>
+        </NotchedOutlineLegend>
+      </NotchedOutlineRoot>
     );
   }
 
   const labelWidth = labelWidthProp > 0 ? labelWidthProp * 0.75 + 8 : 0.01;
 
   // TODO remove this branch
   return (
-    <fieldset
+    <NotchedOutlineRoot
       aria-hidden
       style={{
         [`padding${capitalize(align)}`]: 8,
         ...style,
       }}
-      className={clsx(classes.root, className)}
+      className={className}
       ref={ref}
+      styleProps={styleProps}
       {...other}
     >
-      <legend
-        className={classes.legend}
+      <NotchedOutlineLegend
+        styleProps={styleProps}
         style={{
           // IE11: fieldset with legend does not render
           // a border radius. This maintains consistency
@@ -134,8 +139,8 @@ const NotchedOutline = React.forwardRef(function NotchedOutline(props, ref) {
         {/* notranslate needed while Google Translate will not fix zero-width space issue */}
         {/* eslint-disable-next-line react/no-danger */}
         <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
-      </legend>
-    </fieldset>
+      </NotchedOutlineLegend>
+    </NotchedOutlineRoot>
   );
 });
 
@@ -171,4 +176,4 @@ NotchedOutline.propTypes = {
   style: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'PrivateNotchedOutline' })(NotchedOutline);
+export default NotchedOutline;

packages/material-ui/src/OutlinedInput/NotchedOutline.test.js

@@ -1,23 +1,18 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { getClasses, createClientRender } from 'test/utils';
+import { createClientRender } from 'test/utils';
 import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import NotchedOutline from './NotchedOutline';
 
 describe('<NotchedOutline />', () => {
   const render = createClientRender();
 
-  let classes;
   const defaultProps = {
     labelWidth: 36,
     notched: true,
     label: 'My label',
   };
 
-  before(() => {
-    classes = getClasses(<NotchedOutline {...defaultProps} />);
-  });
-
   it('should pass props', () => {
     const { container } = render(
       <NotchedOutline
@@ -31,7 +26,6 @@ describe('<NotchedOutline />', () => {
 
     expect(container.querySelector('fieldset')).to.have.class('notched-outline');
     expect(container.querySelector('fieldset').style.width).to.equal('17px');
-    expect(container.querySelector('legend')).to.have.class(classes.legendNotched);
   });
 
   it('should set alignment rtl', () => {

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { InternalStandardProps as StandardProps } from '..';
+import { SxProps } from '@material-ui/system';
+import { InternalStandardProps as StandardProps, Theme } from '..';
 import { InputBaseProps } from '../InputBase';
 
 export interface OutlinedInputProps extends StandardProps<InputBaseProps> {
@@ -53,6 +54,10 @@ export interface OutlinedInputProps extends StandardProps<InputBaseProps> {
    * If `true`, the outline is notched to accommodate the label.
    */
   notched?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
 export type OutlinedInputClassKey = keyof NonNullable<OutlinedInputProps['classes']>;