[material-ui][Alert] TS error when using slotProps with customised component about material-ui

[alexey-kozlenkov]

@appleSimple my bad 😞
This one should work: https://codesandbox.io/p/sandbox/damp-monad-sptgfr?file=%2Fsrc%2FDemo.tsx%3A12%2C4

[alexey-kozlenkov]

@appleSimple any could be passed as a slotProps's value to CreateSlotsAndSlotProps, can't be passed to Alert's close button slotProps cause it's already specified as SlotProps<React.ElementType<IconButtonProps>, {}, AlertOwnerState>

[appleSimple]

not found example link T^T

[appleSimple]

slotProps's type could be any because of K extends Record<keyof Slots, any>, but not applied any type.

This may be related part of cause.

Alert.d.ts

export type AlertSlotsAndSlotProps = CreateSlotsAndSlotProps<
  AlertSlots,
  {
    closeButton: SlotProps<React.ElementType<IconButtonProps>, {}, AlertOwnerState>;
    closeIcon: SlotProps<React.ElementType<SvgIconProps>, {}, AlertOwnerState>;
  }
>;

types.ts

export type CreateSlotsAndSlotProps<Slots, K extends Record<keyof Slots, any>> = {
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots?: Slots;
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps?: {
    [P in keyof K]?: K[P];
  };
};

[ZeeshanTamboli]

You can type cast slotProps.closeButton to resolve the issue. Here's how:

<Alert
  icon={<CheckIcon fontSize="inherit" />}
  severity="success"
  onClose={() => void 0}
  slots={{
    closeIcon: CloseIcon,
    closeButton: MyIconButton,
  }}
  slotProps={{
    closeButton: {
      iconSize: 'medium',
    } as MyIconButtonProps,
  }}
>
  Here is a gentle confirmation that your action was successful.
</Alert>

This approach works, but it's not clear if it should be documented as a solution or is considered a workaround in which case this is a bug.

[alexey-kozlenkov]

@ZeeshanTamboli I don't it's possible since slotProps values there are not just types of desired props but a SlotProps<...> wrapper around original MUI's IconButtonProps, as I specified at the beginning of that issue.

[DiegoAndai]

Hey @alexey-kozlenkov, thanks for the report 😊

This use case is covered in other components by adding ...SlotPropsOverrides types, for example the BadgeRootSlotPropsOverrides type in the Badge component. These types can then be augmented to accomplish the expected behavior, for example: https://codesandbox.io/p/sandbox/slot-props-overrides-example-7nm889?file=%2Fsrc%2FApp.tsx%3A10%2C2.

This hasn't been implemented in all components, the Alert being one of them. I'm accepting this as an enhancement for the missing functionality and adding the ready-to-take label if anyone wishes to work on it. It should be enough to add new types AlertCloseButtonSlotPropsOverrides and AlertCloseIconSlotPropsOverrides following the pattern used in Badge.

[alexey-kozlenkov]

@DiegoAndai have a look please when convenient