Reactjs 使用材质UI向上滚动时，如何向导航添加背景色？

我只能在向上滚动时显示导航栏，但是，我的网站上有一个部分我看不到导航栏，因为背景是透明的

当我向上滚动时，我想将白色背景应用到导航栏上，但我不确定如何在代码中实现这一点

function HideOnScroll(props) {
  const { children, window } = props;
  const trigger = useScrollTrigger({ target: window ? window() : undefined });
  return (
    <Slide appear={false} direction="down" in={!trigger}>
      {children}
    </Slide>
  );
}

HideOnScroll.propTypes = {
  children: PropTypes.element.isRequired,
  window: PropTypes.func
};

export default function Nav(props) {
  const classes = useStyles();

  return (
    <React.Fragment>
      <CssBaseline />
      <HideOnScroll {...props}>
        <div className={classes.root}>
          <AppBar style={{ background: "transparent", boxShadow: "none" }}>
            <Toolbar>
              <MenuItem className={classes.title}>
                <Typography variant="h6" className={classes.title}>
                  zaddons
                </Typography>
              </MenuItem>
              <Link href="/">
                <a className="nav-link" className={classes.navLink}>
                  Home
                </a>
              </Link>
              <Link href="/partnerships">
                <a className="nav-link" className={classes.navLink}>
                  Partnerships
                </a>
              </Link>
              <Link href="/culture">
                <a className="nav-link" className={classes.navLink}>
                  {" "}
                  Our Culture
                </a>
              </Link>
              <Link href="/joinus">
                <a className="nav-link" className={classes.navLink}>
                  Join Us
                </a>
              </Link>
              <BtnContactUs />
            </Toolbar>
          </AppBar>
        </div>
      </HideOnScroll>
    </React.Fragment>
  );
}

功能隐藏滚动（道具）{
const{children，window}=props；
const trigger=useCrollTrigger（{target:window？window（）：undefined}）；
返回(
{儿童}
);
}
HideOnScroll.propTypes={
子项：PropTypes.element.isRequired，
窗口：PropTypes.func
};
导出默认功能导航（道具）{
const classes=useStyles（）；
返回(
加入我们
);
}

Navbar.js

/**
* Navbar Component
*/
import React from 'react';
import PropTypes from 'prop-types';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Link from '@material-ui/core/Link';
import Button from '@material-ui/core/Button';
import withStyles from '@material-ui/core/styles/withStyles';
import useScrollTrigger from '@material-ui/core/useScrollTrigger';

// Import style
import styles from './Navbar.style';

import companyLogo from '../assets/images/logo.png';

const Navbar = (props) => {
  const { classes } = props;
  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 100
  });

  return (
    <>
      <AppBar
        position="fixed"
        color="default"
        elevation={0}
        className={`${classes.appBar} ${
          trigger === false ? '' : classes.appBarScrolled
        }`}>
        <Toolbar className={classes.toolbar}>
          <div className={classes.toolbarLogo}>
            <img src={companyLogo} alt="company logo" />
          </div>
          <nav>
            <Link
              variant="button"
              color="textPrimary"
              href="#"
              className={classes.link}
            >
              Home
            </Link>
            <Link
              variant="button"
              color="textPrimary"
              href="#"
              className={classes.link}
            >
              Services
            </Link>
            <Link
              variant="button"
              color="textPrimary"
              href="#"
              className={classes.link}
            >
              Feature Posts
            </Link>
            <Link
              variant="button"
              color="textPrimary"
              href="#"
              className={classes.link}
            >
              Team
            </Link>
            <Link
              variant="button"
              color="textPrimary"
              href="#"
              className={classes.link}
            >
              Contact
            </Link>
          </nav>
          <Button
            href="#"
            color="primary"
            variant="outlined"
            className={classes.link}
          >
            Client Portal
          </Button>
        </Toolbar>
      </AppBar>
    </>
  );
};

Navbar.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(Navbar);

---

嗨，欢迎来到StackOverflow。考虑在代码中添加一个摘要，除了代码，来描述它是如何解决问题/回答问题的。

/**
 * Navbar Styles
 */
export default (theme) => ({
  appBar: {
    backgroundColor: 'transparent',
    transition: theme.transitions.create(['background-color'], {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.standard
    }),
    padding: '0 20px',
    borderBottom: `1px solid ${theme.palette.divider}`
  },
  appBarScrolled: {
    backgroundColor: '#211A5A',
    borderBottom: '1px solid #ededed',
    transition: theme.transitions.create(['background-color'], {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.standard
    })
  },
  toolbarTitle: {
    flexGrow: 1
  },
  toolbar: {
    flexWrap: 'wrap'
  },
  toolbarLogo: {
    flexGrow: 1
  },
  link: {
    margin: theme.spacing(1, 1.5)
  }
});