[OutlinedInput] Fix ownerState undefined in theme style overrides (#…

…33241)
mui · Jun 23, 2022 · ed7972b · ed7972b
1 parent fd279d6
commit ed7972b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 0 deletions.
diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.js
@@ -155,11 +155,26 @@ const OutlinedInput = React.forwardRef(function OutlinedInput(inProps, ref) {
     states: ['required'],
   });
 
+  const ownerState = {
+    ...props,
+    color: fcs.color || 'primary',
+    disabled: fcs.disabled,
+    error: fcs.error,
+    focused: fcs.focused,
+    formControl: muiFormControl,
+    fullWidth,
+    hiddenLabel: fcs.hiddenLabel,
+    multiline,
+    size: fcs.size,
+    type,
+  };
+
   return (
     <InputBase
       components={{ Root: OutlinedInputRoot, Input: OutlinedInputInput, ...components }}
       renderSuffix={(state) => (
         <NotchedOutlineRoot
+          ownerState={ownerState}
           className={classes.notchedOutline}
           label={
             label != null && label !== '' && fcs.required ? (

diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.test.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.test.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from 'test/utils';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import OutlinedInput, { outlinedInputClasses as classes } from '@mui/material/OutlinedInput';
 import InputBase from '@mui/material/InputBase';
 
@@ -59,4 +60,27 @@ describe('<OutlinedInput />', () => {
     );
     expect(document.querySelector('[data-test=test]')).toHaveComputedStyle({ marginTop: '10px' });
   });
+
+  it('should have ownerState in the theme style overrides', () => {
+    expect(() =>
+      render(
+        <ThemeProvider
+          theme={createTheme({
+            components: {
+              MuiOutlinedInput: {
+                styleOverrides: {
+                  root: ({ ownerState }) => ({
+                    // test that ownerState is not undefined
+                    ...(ownerState.disabled && {}),
+                  }),
+                },
+              },
+            },
+          })}
+        >
+          <OutlinedInput />
+        </ThemeProvider>,
+      ),
+    ).not.to.throw();
+  });
 });