[OutlinedInput] Fix ownerState undefined in theme style overrides

[siriwatknp]

closes #31982

Root cause

No ownerState is provided to NotchedOutlineRoot. This is strange at first because the NotchedOutlinedRoot slot is not root but why the ownerState is logged.

const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: ({ ownerState }) => {
          console.log('MuiOutlinedInput ownerState', ownerState);
          return {};
        },
      },
    },
  },
});

Each slot traverses the styleOverrides and passes props if the value is a function. In the end, the slot picks the resolved styles. That's why the callback is called multiple times even though it is declared on the root slot style overrides.

We can't use @oliviertassinari 's fix at this point because it will be breaking changes. This is one example from InputBase:

export const InputBaseRoot = styled('div', {
  name: 'MuiInputBase',
  slot: 'Root',
  overridesResolver: (props, styles) => {
    const { ownerState } = props;
    return [
      styles.root,
      ownerState.formControl && styles.formControl,
      ownerState.startAdornment && styles.adornedStart,
      ownerState.endAdornment && styles.adornedEnd,
      ownerState.error && styles.error,
      ownerState.size === 'small' && styles.sizeSmall,
      ownerState.multiline && styles.multiline,
      ownerState.color && styles[`color${capitalize(ownerState.color)}`],
      ownerState.fullWidth && styles.fullWidth,
      ownerState.hiddenLabel && styles.hiddenLabel,
    ];
  },
})

Here is the InputBase root slot which looks for other various keys.

We could do the fix in v6 as breaking changes.

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 6c8bdee

[mnajdova]

Agree, left similar comment in #31982 (comment)

We would need to have a list of style overrides the component needs in order for this to work as expected.