reactjs - 在 Material UI 中设置 Snackbar 的背景颜色

Question

我正在使用 Material UI 中的 Snackbar 组件。此时 Snackbar 显示为黑色。你知道我怎样才能改变颜色吗？设置背景颜色只会更改显示 Snackbar 的整个 div 的颜色。它不会更改 Snackbar 的颜色。

Answer 1

使用 Material UI v1，您应该使用 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);

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

ContentProps={{
  classes: {
    root: 'errorClass'
  }
}}

并在index.css文件中:

.errorClass { color: 'red' }