¿Por qué está arrojando un error?
import Snackbar from "@mui/material/Snackbar"; import MuiAlert from "@mui/material/Alert"; const Alert = ({children}) => <MuiAlert>{children}</MuiAlert> <Snackbar open> <Alert>test</Alert> </Snackbar>(pero esto no es?)
import Snackbar from "@mui/material/Snackbar"; import MuiAlert from "@mui/material/Alert"; <Snackbar open> <MuiAlert>test</MuiAlert> </Snackbar>En mi opinión, ambos deberían funcionar igual.
Cuando usa la sintaxis de componente de una sola línea, no necesita usar la palabra clave de return para recuperar el componente. Solo => es suficiente:
import Snackbar from "@mui/material/Snackbar"; import MuiAlert from "@mui/material/Alert"; const Alert = ({children}) => <MuiAlert>{children}</MuiAlert> export default function App() { return ( <> <Snackbar open> <Alert>test</Alert> </Snackbar> </> ); }Resulta que necesitaba pasar la ref usando React.forwardRef a la alerta:
import Snackbar from "@mui/material/Snackbar"; import MuiAlert from "@mui/material/Alert"; const Alert = React.forwardRef(({children}, ref) => <MuiAlert ref={ref}>{children}</MuiAlert>) <Snackbar open> <Alert>test</Alert> </Snackbar>