如何实现MUI Snackbar组件内文本居中显示

你之前设置justifyContent、alignItems等属性不生效，核心原因是样式命中的元素层级不对：Snackbar根节点只负责控制提示条在页面的悬浮位置，Alert内部的文本由专属的.MuiAlert-message容器包裹，默认左对齐，给外层根节点加布局属性不会影响内部文本的排版规则。

以下是3种可直接落地的实现方案：

• 方案1：单组件内联样式（最推荐，改动最小）
  直接给Alert组件的sx属性添加样式，精准命中内部文本容器即可：

  <Alert 
    onClose={handleClose} 
    severity="success" 
    sx={{ 
      width: "100%",
      // 如需让图标、文本、关闭按钮整体在Alert条内居中，保留这行
      justifyContent: "center",
      // 控制内部文本居中
      "& .MuiAlert-message": {
        textAlign: "center"
      }
    }}
  >
    This is a success message!
  </Alert>
  

  如果只需要文本居中、不需要调整图标和关闭按钮的位置，只保留"& .MuiAlert-message"对应的样式块即可。

• 方案2：通过Snackbar的ContentProps配置（适配无Alert的原生Snackbar场景）
  如果你不封装Alert组件、直接使用Snackbar原生的message属性，可以通过ContentProps直接给内容容器加样式：

  <Snackbar
    open={open}
    autoHideDuration={6000}
    onClose={handleClose}
    ContentProps={{
      sx: {
        justifyContent: "center",
        textAlign: "center"
      }
    }}
    message="This is a success message!"
  />
  

• 方案3：全局主题覆写（适配全项目统一居中的需求）
  如果项目内所有Snackbar提示都需要文本居中，可以在MUI主题配置里统一覆写组件默认样式，不用每个组件单独加属性：

  import { createTheme } from "@mui/material/styles";
  const theme = createTheme({
    components: {
      MuiAlert: {
        styleOverrides: {
          root: {
            justifyContent: "center"
          },
          message: {
            textAlign: "center"
          }
        }
      }
    }
  })
  

避坑提示：不要把文本对齐样式加在Snackbar最外层标签上，Snackbar根节点是fixed定位的外层容器，它的样式只控制提示条在屏幕的显示位置（比如底部居中、顶部居中），不控制内部内容的排版。

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