CODEWITHSUNDEEP
reactjsmaterial-uinext.jssnackbar
Akash Rahman
Akash Rahman

Reputation: 11

does not work material ui snackbar in nextjs

I'm trying to work material-ui snackbar component on my nextjs project, but it not working. And next, I try to this code on reactjs it's working so nicely. that's my code is working on reactjs but does not working on nextjs. Please help me, guys.

My full Code:

    import Button from '@mui/material/Button';
    import Snackbar from '@mui/material/Snackbar';
    import { useState } from 'react';
    
    export default function Demo() {
        const [open, setOpen] = useState(false);
        const toggleOpen = () => setOpen((prev) => !prev);
    
        return (
            <div>
                <Button variant="contained" onClick={toggleOpen}>
                    Open Snackbar: {open ? 'opened' : 'hidden'}
                </Button>
                <Snackbar message="This is archived" opne={open} />
            </div>
        );
    }

Upvotes: 0

Views: 1277

Answers (1)

Nidheesh Davis
Nidheesh Davis

Reputation: 19

This approach worked for me, create a component only for snackbar:

import * as React from 'react';
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} />;
});
function MessageSnackbar({open, autoHideDuration, onClose, severity}) {
    return (
        <Snackbar open={open} autoHideDuration={autoHideDuration} onClose={onClose}>
            <Alert onClose={onClose} severity={severity} sx={{ width: '100%' }}>
                This is a success message!
            </Alert>
        </Snackbar>
    );
}
export default MessageSnackbar;

then import the component dynamically:

const MessageSnackbar = dynamic(
    () => import('components/MessageSnackbar'),
    { ssr: false }
);

then pass the parameters:

<MessageSnackbar open={open} autoHideDuration={5000} onClose={handleClose} severity ={"success"}/>

Hope this will work for you.

Upvotes: 1

Related Questions