在 MUI 中设置 Snackbar 的背景颜色

Posted 2023-02-21

【中文标题】在 MUI 中设置 Snackbar 的背景颜色

【英文标题】：Set the background color of a Snackbar in MUI

【发布时间】：2017-02-16 09:00:15

【问题描述】：

我正在使用来自 MUI 的 Snackbar 组件。目前Snackbar 显示为黑色。你知道我怎样才能改变颜色吗？设置 background-color 只会改变 Snackbar 所在的整个 div 的颜色。它不会改变Snackbar 的颜色。

【参考方案1】：

使用 material-ui 1.0（或更高版本），您应该使用道具 ContentProps 覆盖 SnackbarContent 组件中的根 CSS 类。

这是一个例子：

const styles = 
  root: 
    background: 'red'
  
;

class MySnackbar extends Component 
  render() 
    const  classes  = this.props;

    return (
      <Snackbar
        ContentProps=
          classes: 
            root: classes.root
          
        
        message=<span>Some message</span>
      />
    );
  


export default withStyles(styles)(MySnackbar);

如果有人不想将 style 作为 props 传递，我们也可以在 css 文件中编写一个类并将其分配给 ContentProps，如下所示：

ContentProps=
  classes: 
    root: 'errorClass'
  

在 index.css 文件中：

.errorClass  color: 'red' 

【讨论】：

我探索如何更改material-ui 小吃栏组件颜色的旅程终于结束了。谢谢，emi！

【参考方案2】：

在当前的 material-ui 版本 (4.3.0) 中，有一种比 ContentProps 方式更简单的方法。您可以使用 SnackbarContent 作为子属性，而不是 message 属性，并在其上调用 style=

<Snackbar
  open=this.state.showSnackbar
  autoHideDuration=3000
  onClose=() => this.setState(showSnackbar: false)
>
  <SnackbarContent style=
      backgroundColor:'teal',
    
    message=<span id="client-snackbar">Hello World</span>
  />
</Snackbar>

【参考方案3】：

你必须设置bodyStyle属性：

<Snackbar bodyStyle= backgroundColor: 'teal', color: 'coral'  />

您可以在documentation 中找到有关如何自定义小吃店的更多信息

【讨论】：

从 2019 年 3 月 1 日开始，Material UI V3.9.2 不再有效。 Emi 下面的例子对我来说很好。

【参考方案4】：

Snackbar 的根组件只关心正确定位自身，如果要改变物理Snackbar 的外观，则需要通过ContentProps 属性定位SnackbarContent。在 v5 中，您可以使用 sx 轻松做到这一点：

<Snackbar
  ContentProps=
    sx: 
      background: "red"
    
  

另一种方法是为您的Snackbar 创建一个custom variant：

import  createTheme, ThemeProvider  from "@mui/material/styles";

const theme = createTheme(
  components: 
    MuiSnackbar: 
      variants: [
        
          props:  variant: "trouble" ,
          style: 
            "& .MuiSnackbarContent-root": 
              background: "orange"
            
          
        ,
        
          props:  variant: "bigTrouble" ,
          style: 
            "& .MuiSnackbarContent-root": 
              background: "red"
            
          
        
      ]
    
  
);

<Snackbar variant="bigTrouble"

要与 typescript 一起使用，还需要更新 Snackbar 的 prop 类型：

declare module "@mui/material/Snackbar" 
  interface SnackbarProps 
    variant: "trouble" | "bigTrouble";
  

【参考方案5】：

使用 MUI v5 自定义 Snackbar（背景、文本颜色或任何其他样式）的最佳选项是使用 sx 属性和特定的类名作为变体：

<Snackbar
  sx=
    '& .SnackbarItem-variantSuccess': 
      backgroundColor: colors.primary, //your custom color here
    ,
    '& .SnackbarItem-variantError': 
      backgroundColor: colors.alert, //your custom color here
    ,
    '& .SnackbarItem-variantWarning': 
      backgroundColor: colors.attention, //your custom color here
    ,
    '& .SnackbarItem-variantInfo': 
      backgroundColor: colors.secondary, //your custom color here
    ,
  
  autoHideDuration=10000
  //...other props here>
</Snackbar>

同样的方法可以应用到 notistack 库来定制他们的snackbar。