如何在材质ui中的滚动上更改appbar颜色答案

【问题标题】：How to Change appbar Color on Scroll in material ui如何在材质ui中的滚动上更改appbar颜色
【发布时间】：2022-06-30 22:40:49
【问题描述】：

当我向下滚动时，我正在尝试更改背景颜色。但不知道为什么它不起作用。我的导航栏组件

import { useScrollTrigger } from "@mui/material";


const NavBar = (props) => {
  
 
  function ChangeColorOnScroll(props) {
    const { children, window } = props;
    const trigger = useScrollTrigger({
      disableHysteresis: true,
      threshold: 0,
      target: window ? window() : undefined,
    });

    return React.cloneElement(children, {
      style: { background: trigger ? "black" : "transparent" },
    });
  }

  return (
    <>
      <ChangeColorOnScroll {...props}>
        <AppBar position="fixed" color="transparent">
         .....-> Component Data
        </AppBar>
      </ChangeColorOnScroll>
      <main>{props.children}</main>
    </>
  );
};
export default NavBar;

源代码 CodeSandbox *

https://codesandbox.io/s/happy-boyd-njbx2u?file=/src/App.js

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

这里有很多使用useScrollTrigger钩子的例子https://codesandbox.io/s/material-ui-usescrolltrigger-963ov。

其中之一是在页面滚动时更改AppBar 组件的背景颜色。

上面的代码框是使用 Material UI v4 创建的，但仍然与 MUI v5 相关。

【讨论】：