Typescript error "children does not exists on type IntrinsicAttributes & RefAttributes<unkno-CodePudding

Error:

Type '{ children: string; severity: string; sx: { width: string; }; }' is not assignable to type 'IntrinsicAttributes & RefAttributes'. Property 'children' does not exist on type 'IntrinsicAttributes & RefAttributes'.

Alert component

const Alert = React.forwardRef(function Alert(props, ref) {
  const ref_var = useRef<HTMLDivElement>(null);
  return <MuiAlert elevation={6} ref={ref_var} variant="filled" {...props} />;
});

Using Alert component

 <Alert severity="success" sx={{ width: "100%" }}>
         Success
        </Alert>

CodePudding user response：

The custom Alert component implementation is correct, but you have to mention the React.forwardRef's props React.forwardRef<HTMLDivElement, AlertProps> to solve the TypeScript compilation issues.

Also, the local ref variable ref_var is not required.

    const AlertFixed = React.forwardRef<HTMLDivElement, AlertProps>(
  (props, ref) => (
    <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
  )
);

and call the Alert component,

<AlertFixed severity="error" sx={{ width: "50%" }}>
  Failed
</AlertFixed>

Here is the working codesanbox.