Extend ToastContainerProps in type declarations with 'div' Element props

[johnvictorfs]

This fixes the following issue when using TypeScript:

import { DefaultToastContainer, ToastContainerProps } from 'react-toast-notifications' export const CustomToastContainer: React.FC<ToastContainerProps> = (props) => ( <DefaultToastContainer style={{ marginTop: '20px' }} {...props} /> )

No overload matches this call. Overload 1 of 2, '(props: PropsWithChildren<ToastContainerProps>, context?: any): ReactElement<any, any> | Component<ToastContainerProps, any, any> | null', gave the following error. Type '{ children: ReactNode; className?: string | undefined; hasToasts: boolean; placement: Placement; style: { marginTop: string; }; }' is not assignable to type 'IntrinsicAttributes & ToastContainerProps & { children?: ReactNode; }'. Property 'style' does not exist on type 'IntrinsicAttributes & ToastContainerProps & { children?: ReactNode; }'. Overload 2 of 2, '(props: ToastContainerProps, context?: any): ReactElement<any, any> | Component<ToastContainerProps, any, any> | null', gave the following error. Type '{ children: ReactNode; className?: string | undefined; hasToasts: boolean; placement: Placement; style: { marginTop: string; }; }' is not assignable to type 'IntrinsicAttributes & ToastContainerProps'. Property 'style' does not exist on type 'IntrinsicAttributes & ToastContainerProps'.ts(2769)

Since the component does not expect a style prop, that is then passed down to div

export const ToastContainer = ({ hasToasts, placement, ...props }: ToastContainerProps) => ( <div className="react-toast-notifications__container" css={{ boxSizing: 'border-box', maxHeight: '100%', maxWidth: '100%', overflow: 'hidden', padding: gutter, pointerEvents: hasToasts ? null : 'none', position: 'fixed', zIndex: 1000, ...placements[placement], }} {...props} // here /> );

---

With fixed type declarations: