How to fix the "Unexpected &" while creating a custom react astro component?

Question

I integrated react with an astro site. I am creating a custom input component with astro, react, and mui to reuse. I am trying to have extra custom props, but I am getting the error, as shown in the screenshot.

It works when I don't give any custom props like

---
import { TextField, TextFieldProps } from "@mui/material";

export type Props = {} & TextFieldProps;

const { variant = "outlined", margin, label, ...rest } = Astro.props;
---

<TextField client:only variant={variant} label={label} {...rest} />

If I want any custom prop, it throws an error. How do I fix it?

My code so far:

import { TextField, TextFieldProps } from "@mui/material";

export type Props = {
  margin?: string
} & TextFieldProps;

const { variant = "outlined", margin, label, ...rest } = Astro.props;

<TextField client:only variant={variant} label={label} {...rest} />

Codesandbox Link for Quick setup: https://codesandbox.io/p/sandbox/loving-kare-m8ggi7

Any help is appreciated. Thanks

Answer 1

This is probably an Astro compiler bug (perhaps related to https://github.com/withastro/compiler/issues/554).

As a workaround, you can flip the order here:

---
import { TextField, TextFieldProps } from "@mui/material";

export type Props = TextFieldProps & {
  margin?: string
};
---