Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 8x 7x 7x 7x 7x 8x | import React from 'react';
import SnackbarContent from '@mui/material/SnackbarContent';
import { useTheme } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import CloseIcon from '@mui/icons-material/Close';
import IconButton from '@mui/material/IconButton';
export interface CustomSnackbarProps {
message: string;
severity: 'success' | 'info' | 'warning' | 'error';
onClose: () => void;
}
// On enveloppe dans forwardRef pour passer le ref à SnackbarContent
export const CustomSnackbar = React.forwardRef<HTMLDivElement, CustomSnackbarProps>(
({ message, severity, onClose }, ref) => {
const theme = useTheme();
const bgColor = theme.palette[severity].main;
const textColor = theme.palette.getContrastText(bgColor);
return (
<SnackbarContent
ref={ref}
style={{
backgroundColor: bgColor,
color: textColor,
borderRadius: theme.shape.borderRadius,
}}
message={
<Typography variant="body2" sx={{ color: textColor }}>
{message}
</Typography>
}
action={
<IconButton size="small" onClick={onClose} sx={{ color: textColor }}>
<CloseIcon fontSize="small" />
</IconButton>
}
/>
);
}
);
// Pour le displayName dans les devtools
CustomSnackbar.displayName = 'CustomSnackbar';
|