Material UI滚动时修改AppBar颜色代码不生效如何解决

问题现象 #

需要实现页面向下滚动时切换AppBar组件背景色的交互，原有代码运行后效果未正常触发，初始问题代码如下：

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;

失效原因 #

• 核心问题：ChangeColorOnScroll组件被定义在NavBar组件内部，每次NavBar重渲染时，React会将其识别为全新的组件类型，触发组件的卸载、重挂载流程，导致useScrollTrigger绑定的滚动监听事件无法持续正常工作。
• 缺少必要依赖导入：代码中使用了React.cloneElement和AppBar组件，但未从对应依赖包中导入，会直接触发运行时错误。
• 样式优先级问题：MUI的AppBar组件自带默认背景样式，普通内联style可能被默认样式覆盖，导致颜色修改不生效。

修复后代码 #

import React from 'react';
import { useScrollTrigger, AppBar } from "@mui/material";

// 滚动触发样式修改组件移至外层定义，避免重复销毁重建
function ChangeColorOnScroll(props) {
  const { children, window } = props;
  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 0,
    target: window ? window() : undefined,
  });

  return React.cloneElement(children, {
    sx: {
      background: trigger ? "#000" : "transparent",
      transition: "background-color 0.25s ease"
    },
    elevation: trigger ? 4 : 0
  });
}

const NavBar = (props) => {
  return (
    <>
      <ChangeColorOnScroll {...props}>
        <AppBar position="fixed" color="transparent">
          {/* 导航栏业务内容 */}
        </AppBar>
      </ChangeColorOnScroll>
      <main>{props.children}</main>
    </>
  );
};
export default NavBar;

关键调整说明 #

• 将ChangeColorOnScroll组件移到NavBar外层定义，保证组件实例稳定，滚动监听逻辑可以正常持续生效。
• 补全React、AppBar的导入语句，解决运行时引用报错。
• 用MUI原生的sx属性替换普通内联style，保证自定义背景样式优先级高于组件默认样式，同时可添加过渡动画让颜色切换更自然。
• 额外增加滚动时的阴影（elevation）调整，符合常规导航栏交互逻辑，可按需删除。

内容的提问来源于stack exchange，提问作者Waqas