设置 Material UI Snackbar 的背景颜色

Question

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

我查看了其他一些 Stackoverflow 答案，但仍然无法正常工作。

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

样式表

const createClientsStyle = function(theme){
    return  {
     root: {
        flexGrow: 1,
        position:"relative",
        top:"175px"

    },

    logoContainer:{
      position:"relative",
      margin:"0 auto",
      top:"120px"
    },
    container: {
        marginTop:"0px",
        padding: theme.spacing(2),
        textAlign: 'center',
        color: theme.palette.text.secondary,
    },
    clientItem:{
      fontSize:"2em",
      display:"inline-block",
      textAlign:"center",
      width:"100%",
      color:"grey",
       '&:hover': {
       background: "#8a0eff3b",
         transition: "0.4s"
     },
    },
      clientItemSelected: {
      background: "#8a0eff3b",
      fontSize:"2em",
      display:"inline-block",
      textAlign:"center",
      color:"grey",
       '&:hover': {
       background: "#8a0eff3b",
         transition: "0.4s"
     },
    },

    textField:{
      width:"25em",
    },

    listItem:{
      fontSize:'35px',//Insert your required size

    },
    clientButton:{
      backgroundColor:"purple"
    },

    tinyTextClickMe:{
      position:"relative",
      fontSize:"0.5em",
      right:"10%"
    },
    snackbarStyle:{
      backgroundColor:"orange"
    }
  }
}

export default createClientsStyle

Answer 1

Snackbar component 处理打开/关闭状态、转换和定位，但 Snackbar 将控制 Snackbar 的外观（例如背景颜色、排版、填充）委托给 SnackbarContent component。

如果您查看Customized snackbars demo，您会发现它通过在SnackbarContent 元素而不是Snackbar 元素上指定className 来更改背景颜色。您也可以通过在ContentProps 中指定className 来实现相同的效果。

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

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