I'm new to using MUI and can't figure this one out after digging through the docs. The close button is taking up an extra line when I would like for it to be on the same line as "again". I've tried playing around with absolute positioning but I haven't had any luck.
...const action = (
<>
<IconButton
size="small"
aria-label="close"
color="inherit"
onClick={toggleMessage}
>
<CloseIcon fontSize="small" />
</IconButton>
</>
)
return (
<>
{message && (
<Snackbar
ContentProps={{
sx: {
backgroundColor: 'green',
borderRadius: 0,
width: '100vh',
},
}}
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
message={props.message}
open={message}
action={action}
></Snackbar>...
<Snackbar
// other props
ContentProps={{
sx: {
flexWrap: 'nowrap', // <--- Add this
// other styles
// If you want to handle actions container styles, add this:
'& .MuiSnackbarContent-action': {
// Or handle button styles, add this:
// actions container css
'& button': {
// button css
}
}
},
}}
action={action}
>