Javascript 设置材质UI Snackbar的背景色

当我设置一个类名来更改Snackbar的背景时，它不会覆盖它。相反，当页面呈现时，它会立即显示我想要的背景色，然后立即被覆盖

我看了一些其他的答案，我仍然无法让它工作

// imports....
import Snackbar from '@material-ui/core/Snackbar';
import createClientsStyle from "../../../PageComponents/Landing/CreateClients/style";

function CreateClients(props) {

    //....code

      const { classes } = props;

      return (

              //............code

              <div>

                  <Snackbar

                      className={classes.snackbarStyle}    //<--- here

                      anchorOrigin={{
                        vertical: 'top',
                        horizontal: 'right',
                      }}

                      open={true}
                      autoHideDuration={6000}

                      ContentProps={{
                        'aria-describedby': 'message-id',

                      }}

                      message={<span id="message-id"><div>Hi there! Some message.</div></span>}

                  />
            </div>

    );
}

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

const styles = (theme)=>(createClientsStyle(theme));

export default withStyles(styles)(CreateClients)

控制打开/关闭状态、转换和定位，但Snackbar委托控制Snackbar的外观，例如背景色、排版、填充到屏幕

如果查看，您将看到它通过在SnackbarContent元素而不是Snackbar元素上指定类名来更改背景色。您还可以通过在ContentProps中指定类名来实现相同的效果

下面的示例演示了为内容指定类名的两种方法

import React from "react";
import ReactDOM from "react-dom";

import Snackbar from "@material-ui/core/Snackbar";
import SnackbarContent from "@material-ui/core/SnackbarContent";
import { withStyles } from "@material-ui/core/styles";
const styles = {
  snackbarStyleViaContentProps: {
    backgroundColor: "orange"
  },
  snackbarStyleViaNestedContent: {
    backgroundColor: "lightgreen",
    color: "black"
  }
};
function App({ classes }) {
  return (
    <div>
      <Snackbar
        anchorOrigin={{
          vertical: "top",
          horizontal: "right"
        }}
        open={true}
        ContentProps={{
          "aria-describedby": "message-id",
          className: classes.snackbarStyleViaContentProps
        }}
        message={
          <span id="message-id">
            <div>Hi there! Some message.</div>
          </span>
        }
      />
      <Snackbar
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right"
        }}
        open={true}
      >
        <SnackbarContent
          aria-describedby="message-id2"
          className={classes.snackbarStyleViaNestedContent}
          message={
            <span id="message-id2">
              <div>Hi there! Message 2.</div>
            </span>
          }
        />
      </Snackbar>
    </div>
  );
}

const StyledApp = withStyles(styles)(App);

const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

---

@威廉，你能分享一下密码沙盒吗？这段代码看起来很有效，我想有一种不用SnackbarContent容器的方法。这是有效的：ContentProps={{className:classes.snackbarStyle}

import React from "react";
import ReactDOM from "react-dom";

import Snackbar from "@material-ui/core/Snackbar";
import SnackbarContent from "@material-ui/core/SnackbarContent";
import { withStyles } from "@material-ui/core/styles";
const styles = {
  snackbarStyleViaContentProps: {
    backgroundColor: "orange"
  },
  snackbarStyleViaNestedContent: {
    backgroundColor: "lightgreen",
    color: "black"
  }
};
function App({ classes }) {
  return (
    <div>
      <Snackbar
        anchorOrigin={{
          vertical: "top",
          horizontal: "right"
        }}
        open={true}
        ContentProps={{
          "aria-describedby": "message-id",
          className: classes.snackbarStyleViaContentProps
        }}
        message={
          <span id="message-id">
            <div>Hi there! Some message.</div>
          </span>
        }
      />
      <Snackbar
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right"
        }}
        open={true}
      >
        <SnackbarContent
          aria-describedby="message-id2"
          className={classes.snackbarStyleViaNestedContent}
          message={
            <span id="message-id2">
              <div>Hi there! Message 2.</div>
            </span>
          }
        />
      </Snackbar>
    </div>
  );
}

const StyledApp = withStyles(styles)(App);

const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);