MUI Snackbar操作按钮为何独占一行？

问题出在Snackbar Content组件的flex布局行为被自定义样式干扰，导致按钮被挤到单独一行。可以通过调整Content的flex属性来修复：

1. 强制Content容器不换行，同时让文本和按钮垂直居中
2. 让文本区域占满剩余空间，按钮保持在右侧

修改你的代码如下：

...
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',
              display: 'flex',
              alignItems: 'center',
              flexWrap: 'nowrap', // 禁止内容换行
              '& .MuiSnackbarContent-message': {
                flexGrow: 1, // 文本区域占据剩余空间
                whiteSpace: 'nowrap', // 可选：文本过长时不换行，显示省略号
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              },
            },
          }}
          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
          message={props.message}
          open={message}
          action={action}
        ></Snackbar>
...

说明： #

• flexWrap: 'nowrap' 确保文本和按钮始终在同一行
• alignItems: 'center' 让两者垂直居中对齐
• & .MuiSnackbarContent-message 里的样式控制文本区域的行为，避免文本过长时挤压按钮位置

如果需要允许文本换行但按钮仍保持在同一行（比如文本多行时按钮垂直居中），可以移除whiteSpace: 'nowrap'，保留其他flex属性即可。

内容的提问来源于stack exchange，提问作者Brenden Baio