You will find all the styles for these components insrc/assets/jss/nextjs-material-kit/components/snackbarContentStyle.js.
We restyled the classic Material UI SnackbarContent and gave it a more attractive look.
import React from "react";
// @material-ui/icons
import Check from "@material-ui/icons/Check";
import Warning from "@material-ui/icons/Warning";
// core components
import SnackbarContent from "/components/Snackbar/SnackbarContent.js";
import Clearfix from "/components/Clearfix/Clearfix.js";
export default function Notifications(){
return (
<div>
<SnackbarContent
message={
<span>
<b>INFO ALERT:</b> You've got some friends nearby, stop looking
at your phone and find them...
</span>
}
close
color="info"
icon="info_outline"
/>
<SnackbarContent
message={
<span>
<b>SUCCESS ALERT:</b> You've got some friends nearby, stop looking
at your phone and find them...
</span>
}
close
color="success"
icon={Check}
/>
<SnackbarContent
message={
<span>
<b>WARNING ALERT:</b> You've got some friends nearby, stop looking
at your phone and find them...
</span>
}
close
color="warning"
icon={Warning}
/>
<SnackbarContent
message={
<span>
<b>DANGER ALERT:</b> You've got some friends nearby, stop looking
at your phone and find them...
</span>
}
close
color="danger"
icon="info_outline"
/>
<Clearfix />
</div>
);
}SnackbarContent.propTypes = {
message: PropTypes.node.isRequired,
color: PropTypes.oneOf(["info", "success", "warning", "danger", "primary"]),
close: PropTypes.bool,
icon: PropTypes.func
};Beside these props, you can check out the official material-ui documentation.