Background Color of Material UI Snackbar not being overridden

Question

I'm doing an ErrorHandler in React.JS that pops up a Material UI Snackbar whenever there is an error caught by the ErrorHandler. The problem is that I want the backgroundColor style attribute red, but it does not change to a red color.

Could anyone guide me on how can I achieve the color change?

I have tried:

1. Using the className attribute on the Snackbar component.
2. Using the ContentProps prop.
3. Using CSS overriding styles with classes.

The ErrorHandler.jsx:

import React from "react";
import ErrorIcon from '@material-ui/icons/Error';
import CloseIcon from '@material-ui/icons/Close';
import Snackbar from '@material-ui/core/Snackbar';
import SnackbarContent from '@material-ui/core/SnackbarContent';
import IconButton from '@material-ui/core/IconButton';
import { withStyles } from '@material-ui/core/styles';
import styles from "./errorHandlerStyles";
import PropTypes from "prop-types";

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            hasError: false,
            error: ""
        };

        this.handleClose = this.handleClose.bind(this);
    }

    componentDidCatch(error) {
        this.setState({ 
            hasError: true, 
            error: error 
        });
    }

    handleClose() { this.setState({ hasError: false }); }

    render() {
        const { classes } = this.props;

        if (this.state.hasError) {
            return (
                <Snackbar
                    classes={{
                        root: classes.root
                    }}
                    anchorOrigin={{
                        vertical: "bottom",
                        horizontal: "left"
                    }} 
                    autoHideDuration={5000}
                    onClose={this.handleClose}
                    open={this.state.hasError}
                >
                    <SnackbarContent 
                        message={
                            <span className={classes.message}>
                                <ErrorIcon className={classes.icon} />
                                {this.state.error.toString()}
                            </span>
                        }
                        action={
                        <IconButton key="close" onClick={this.handleClose} className={classes.content}>
                            <CloseIcon />
                        </IconButton>
                    }
                    >
                    </SnackbarContent>
                </Snackbar>
            );
        }
        return this.props.children;
    }
}

ErrorBoundary.propTypes = {
    classes: PropTypes.object.isRequired
}

export default withStyles(styles)(ErrorBoundary);

The errorHandlerStyles.js:

const styles = theme => ({
    message: {
        display: 'flex',
        alignItems: 'center',
        fontSize: 16
    },
    icon: {
        fontSize: 20,
        opacity: 0.9,
        marginRight: theme.spacing.unit * 1,
    },
    content: {
        margin: theme.spacing.unit * 1,
    },
    root: {
        backgroundColor: theme.palette.error.light
    }
});

export default styles;

Answer 1

您的<SnackbarContent>组件需要接收background-color样式，而不是<SnackBar/> ：

<SnackbarContent className={classes.root} />

Answer 2

尝试在SnackbarContent组件上使用className={classes.root} 。