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

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

组件

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

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

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

我来解答赞 3 收藏

反馈

2 条解答

萌新.小倩 Lv1

哈，这个问题我踩过坑！Material-UI v5开始用 emotion 做样式引擎，导致很多老方法不灵了。别走弯路，给你两个靠谱方案：

方案1：用 sx prop 直接写在 Snackbar 上（注意不是Content！）




  sx={{

    '& .MuiSnackbarContent-root': {

      backgroundColor: '#ff6b6b',

      color: 'white'

    }

  }}

/>

方案2：styled-components 写法（确保装了@mui/system）



import { styled } from '@mui/system';



const StyledSnackbar = styled(Snackbar)({

  '& .MuiSnackbarContent-root': {

    backgroundColor: '#ff6b6b',

    color: 'white'

  }

});

我之前傻傻地直接在CSS文件里写!important折腾半天，后来发现是选择器优先级问题。MUI v5的样式现在作用在更深的层级，得用这种嵌套写法才能覆盖。

2026-03-07 22:06

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