Цвет фона материала пользовательского интерфейса Snackbar не переопределяется

Я делаю ErrorHandler в React.JS, который выводит закусочную панель Material UI всякий раз, когда ErrorHandler обнаруживает ошибку. Проблема в том, что я хочу, чтобы атрибут стиля backgroundColor был красным, но он не меняет цвет на красный.

Может ли кто-нибудь подсказать мне, как я могу добиться изменения цвета?

Я пытался:

1. Использование атрибута className в компоненте Snackbar.
2. Используя опору ContentProps.
3. Использование переопределяющих стилей CSS с классами.

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);

ОшибкаHandlerStyles.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;