react-toast-notifications
react-toast-notifications copied to clipboard
Extend ToastContainerProps in type declarations with 'div' Element props
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:
