[SOLVED] Typescript error "children does not exists on type IntrinsicAttributes & RefAttributes<unknown>'.* " on react component



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%" }}>


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%" }}>

Here is the working codesanbox.

Answered By – SelvaS

Answer Checked By – Mildred Charles (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *