为什么MUI styled创建的AppBar组件状态变化时样式不更新？

问题根因 #

MUI v5 的 styled 工具默认会自动过滤非标准 HTML 属性，你自定义的 scrollNav 没有被显式标记为需要透传的属性，导致样式计算函数始终拿不到更新后的 scrollNav 状态值，因此样式不会触发变更。
另外你当前的滚动事件监听没有配置卸载逻辑，组件销毁后会残留事件回调引发内存泄漏。

修复方案 #

1. 调整 styled 组件配置，透传自定义属性 #

首先从 MUI 样式工具中导入 defaultShouldForwardProp，配置自定义属性透传规则：

import { styled, defaultShouldForwardProp } from '@mui/material/styles';
import MUIAppBar from '@mui/material/AppBar';

const AppBar = styled(MUIAppBar, {
  // 显式指定scrollNav需要透传到样式计算函数
  shouldForwardProp: (prop) => 
    prop === 'scrollNav' || defaultShouldForwardProp(prop)
})(({ theme, scrollNav }) => ({
  // 无特殊需求不需要加!important，MUI自定义样式优先级默认足够覆盖内置样式
  backgroundColor: scrollNav ? 'red' : '#E6EEF4',
  position: 'fixed',
  color: '#232F3D',
  paddingTop: theme.spacing(2),
  paddingBottom: theme.spacing(2),
}))

2. 补全滚动事件的卸载逻辑 #

修改 useEffect 代码，添加销毁回调：

const [scrollNav, setScrollNav] = useState(false)

useEffect(() => {
  const changeNav = () => {
    setScrollNav(window.scrollY >= 96)
  }
  window.addEventListener('scroll', changeNav)
  // 组件卸载时移除事件监听
  return () => window.removeEventListener('scroll', changeNav)
}, [])

3. 组件调用逻辑无需调整 #

原有传参方式可以正常使用：

<AppBar position="fixed" scrollNav={scrollNav}></AppBar>

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