Quiero crear un MUI Snackbar personalizado usando MUI Alert siguiendo el ejemplo en la Documentación oficial pero ESlint me muestra este error:
error Unexpected function expression prefer-arrow-callback error Prop spreading is forbidden react/jsx-props-no-spreadingen esta parte del código:
const Alert = React.forwardRef(function Alert(props, ref) { return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />; }); npx eslint . --fix para solucionar el problema, pero ahora obtengo:
error Component definition is missing display name react/display-name error Prop spreading is forbidden react/jsx-props-no-spreadingAquí está mi código completo:
import * as React from 'react'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import Snackbar from '@mui/material/Snackbar'; import MuiAlert from '@mui/material/Alert'; const Alert = React.forwardRef(function Alert(props, ref) { return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />; }); export default function CustomizedSnackbars() { const [open, setOpen] = React.useState(false); const handleClick = () => { setOpen(true); }; const handleClose = (event, reason) => { if (reason === 'clickaway') { return; } setOpen(false); }; return ( <Stack spacing={2} sx={{ width: '100%' }}> <Button variant="outlined" onClick={handleClick}> Open success snackbar </Button> <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}> <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}> This is a success message! </Alert> </Snackbar> </Stack> ); }estos son tus errores de eslint
error Unexpected function expression prefer-arrow-callback error Prop spreading is forbidden react/jsx-props-no-spreading error Component definition is missing display name react/display-nameprefer-arrow-callback: usa esto => en el reenvío
const Alert = React.forwardRef((props, ref) => { return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />; });reaccionar / mostrar-nombre
const Alert = () => { .... } Alert.displayName = "Alert";reaccionar/jsx-props-sin-propagación
si no desea deshabilitarlo, deberá enumerar todos los accesorios de MuiAlert y pasarlo
const Alert = React.forwardRef((props, ref) => { const { action, children, classes, closeText, color, icon, iconMapping , onClose, event, role, severity, sx, variant = "filled, } = props; return <MuiAlert ref={ref} elevation={6} variant={variant} action={action} ... />; });