javascript - Material UI Snackbar 的背景颜色未被覆盖

Question

我正在 React.JS 中做一个 ErrorHandler，只要 ErrorHandler 捕获到错误，它就会弹出一个 Material UI Snackbar。问题是我想要 backgroundColor 样式属性为红色，但它不会更改为红色。

谁能指导我如何实现颜色变化？

我已经尝试过:

1. 使用 Snackbar 组件上的 className 属性。
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);

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} />