[TextField] sx prop does not exist in slotProps.input

[andreievg]

Steps to reproduce

Steps:

1. Run yarn && yarn tsc -b with this commit: andreievg/mui-6-typescript@c280b19 (no typescript errors)
2. Run yarn && yarn tsc -b with this commit: andreievg/mui-6-typescript@1372caf (see typescript error)

Current behavior

After upgrading to MUI 6 from MUI 5 typescript is confused about sx missing on slotProps.input, previously it was in InputProps, and typescript didn't complaint

before, in MUI 5 (https://github.com/andreievg/mui-6-typescript/blob/c280b19a3ceac5451b4d93a496b6e219f9c9e1d7/src/App.tsx#L4-L12)

const Wrapper: typeof TextField = ({ InputProps, ...props }) => (
  <TextField
    InputProps={{
      ...InputProps,
      sx: { borderRadius: '10px', ...InputProps?.sx },
    }}
    {...props}
  />
);

after, in MUI 6 (https://github.com/andreievg/mui-6-typescript/blob/1372caf7ac510e95046289c1df75a9fe62ed1b5c/src/App.tsx#L4-L14)

const Wrapper: typeof TextField = ({ slotProps, ...props }) => (
  <TextField
    slotProps={{
      input: {
        ...slotProps?.input,
        sx: { borderRadius: '10px', ...slotProps?.input?.sx },
      },
    }}
    {...props}
  />
);

getting this error

src/App.tsx:9:58 - error TS2339: Property 'sx' does not exist on type 'SlotProps<ElementType<FilledInputProps, keyof IntrinsicElements>, {}, BaseTextFieldProps> | SlotProps<...> | SlotProps<...>'.
  Property 'sx' does not exist on type '(ownerState: BaseTextFieldProps) => Partial<FilledInputProps | (Omit<FilledInputProps, "ref"> & RefAttributes<Component<FilledInputProps, any, any>>)> & SlotCommonProps'.

9         sx: { borderRadius: '10px', ...slotProps?.input?.sx },

Expected behavior

upgrade form MUI 5 to MUI 6 doesn't break type safety (when upgrading deprecated api)

Context

upgrade form MUI 5 to MUI 6

Your environment

npx @mui/envinfo

All details provided in repository created for replication

Search keywords: sx slotProps.input MUI6

[DiegoAndai]

Hey @andreievg! Thanks for reaching out.

To merge slotProps with custom values, please use mergeSlotProps, described in this section of the docs: https://mui.com/material-ui/guides/composition/#forwarding-slot-props.

Let me know if that works! 😊

[andreievg]

@DiegoAndai thanks.

There is not mergeSlotProps export @mui/material/utils https://github.com/mui/material-ui/blob/afd551abd3be44de711d6baef48e62e18b97c908/packages/mui-material/src/utils/index.d.ts#L1-L20

There is one in @mui/mui

material-ui/packages/mui-base/src/utils/index.ts

Line 9 in afd551a

export { mergeSlotProps } from './mergeSlotProps';

, but it has a completely different interface to what's described in the doc

material-ui/packages/mui-base/src/utils/mergeSlotProps.ts

Lines 60 to 69 in afd551a

	/**
	* Merges the slot component internal props (usually coming from a hook)
	* with the externally provided ones.
	*
	* The merge order is (the latter overrides the former):
	* 1. The internal props (specified as a getter function to work with get*Props hook result)
	* 2. Additional props (specified internally on a Base UI component)
	* 3. External props specified on the owner component. These should only be used on a root slot.
	* 4. External props specified in the `slotProps.*` prop.
	* 5. The `className` prop - combined from all the above.

Not really sure how to use it in my case (where there is a wrapper component), thanks for your help in advanced

[siriwatknp]

@DiegoAndai mergeSlotProps currently does not merge the sx prop (it will override instead). I wonder if it should merge instead of override (similar to className and style).

This is what happen currently:

// user create a TextField wrapper
const Wrapper: typeof TextField = ({ slotProps, ...props }) => (
  <TextField
    slotProps={{
      input: mergeSlotProps(slotProps?.input, {
        sx: { borderRadius: "10px" },
      }),
    }}
    {...props}
  />
);

// usage of the wrapper
function App() {
  return (
    <div>
      <div className="App">
        <Wrapper
          slotProps={{
            input: {
              sx: { // this `sx` will replace { borderRadius: "10px" }
                color: "red",
              },
            },
          }}
        />
      </div>
    </div>
  );
}

The final result will be color red without border radius 10px because the slotProps.input.sx overrides the default one in the Wrapper component.