Material-UI 的 Snackbar 为什么样式不生效？

南宫耘博提问于 2026-03-04 22:04:18 阅读 4

组件

我用 Material-UI 的 Snackbar 组件，想自定义它的背景色和文字颜色，但加了 sx 样式没反应。试过用 styled 包裹也不行，是不是被默认样式覆盖了？

这是我在组件里写的 CSS 覆盖尝试：

.MuiSnackbarContent-root {
  background-color: #ff6b6b !important;
  color: white !important;
}

我来解答赞 1 收藏

反馈

1 条解答

Good“泽勋 Lv1

Material-UI的Snackbar确实有点坑，我之前也被这个搞过。按照规范，Snackbar本身只是个容器，真正控制样式的应该是SnackbarContent组件。

你现在的写法有两个问题：
1. 直接写类名选择器在Material-UI里不太推荐，容易出问题
2. SnackbarContent的类名已经变了，不是MuiSnackbarContent-root了

试试这个写法，直接用sx属性：

import { Snackbar, Alert } from '@mui/material';



// 用法



  
    backgroundColor: '#ff6b6b',

    color: 'white'

  }}>

    这是提示消息

或者如果你不用Alert组件的话：


  message="提示消息"

  ContentProps={{

    sx: {

      bgcolor: '#ff6b6b',

      color: 'white'

    }

  }}

/>

官方文档里其实写了这个用法，但藏得有点深。最新版Material-UI更推荐用Alert组件来包装内容，这样样式控制会更方便。

2026-03-05 11:00