设置Material UI Snackbar的背景颜色

时间:2019-09-24 06:10:48

标签: javascript reactjs material-ui

当我设置一个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

1 个答案:

答案 0 :(得分:1)

Snackbar component处理打开/关闭状态,过渡和定位,但是SnackbarSnackbar的外观控制权(例如背景色,印刷术,填充)委托给{ {3}}。

如果您查看SnackbarContent component,将会看到它通过在className元素而不是SnackbarContent元素上指定一个Snackbar来改变背景颜色。您还可以通过在className中指定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);

Customized snackbars demo