cssreactjsmaterial-uijsxsnackbar

Why does my action button in my MUI snackbar take up an extra line?


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.

enter image description here

...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>...

Solution

  • <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}
    >