Как добавить цвет фона в навигацию при прокрутке вверх с помощью Material UI?

Question

Мне удалось отобразить панель навигации только при прокрутке вверх, однако на моем веб-сайте есть раздел, в котором я не вижу свою панель навигации, поскольку фон прозрачен.

Я бы хотел применить белый фон к моей панели навигации при прокрутке вверх , но я не уверен, как мне это сделать в моем коде.

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