Material UI Snackbar的背景颜色没有被覆盖

Question

我正在React.JS中执行一个ErrorHandler，每当ErrorHandler捕获到错误时，它就会弹出Material UI Snackbar。问题是我希望 const string json = @"{""spec"": { ""SOMETHING WITH SPACES"" : ""10"", ""SOMETHING WITH MORE SPACES"" : ""20"" }}"; dynamic data = JsonConvert.DeserializeObject(json); Dictionary<string, string> list = data["spec"].ToObject<Dictionary<string, string>>(); foreach (var item in list) { Console.WriteLine(item.Key + ", " + item.Value); } 样式属性为红色，但不会更改为红色。

有人可以指导我如何实现颜色变化吗？

我尝试过：

1. 使用Snackbar组件上的backgroundColor属性。
2. 使用className道具。
3. 在类中使用CSS覆盖样式。

ErrorHandler.jsx：

ContentProps

errorHandlerStyles.js：

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

Answer 1

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

<SnackbarContent className={classes.root} />

Answer 2

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