为啥我的 AppBar MUI 样式组件在状态更改时不会更改样式？

Posted 2023-03-15

【中文标题】为啥我的 AppBar MUI 样式组件在状态更改时不会更改样式？

【英文标题】：Why is my AppBar MUI styled component not changing style on state change?为什么我的 AppBar MUI 样式组件在状态更改时不会更改样式？

【发布时间】：2022-01-01 13:58:05

【问题描述】：

我正在尝试在滚动时更改应用栏颜色。我使用 MaterialUI 风格的功能来创建我的应用栏。我检查了控制台中的状态值，它正在正确更改。不幸的是，应用栏不会对我在样式组件上传递的道具的状态变化做出反应，这应该是组件背景颜色的触发器。

这是样式化的组件代码：

 const AppBar = styled(MUIAppBar)(( theme, scrollNav ) => (
      backgroundColor: !scrollNav ? '#E6EEF4 !important' : 'red !important',
      position: 'fixed',
      color: '#232F3D',
      paddingTop: theme.spacing(2),
      paddingBottom: theme.spacing(2),
    )) 
   

这里是状​​态改变的触发器：

 const [scrollNav, setScrollNav] = useState(false)
  const changeNav = () => 
    setScrollNav(window.scrollY >= 96 ? true : false)
  
useEffect(() => 
    window.addEventListener('scroll', changeNav)
  , [])

这是我将状态传递给样式化组件的方式：

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

【问题讨论】：

请查看mui.com/styles/basics/#adapting-based-on-props

嗨，我尝试使用该方法，但无法访问 Material UI 的 theme

【参考方案1】：

这个例子可能会有所帮助

传播道具

Codesandbox link

import  styled  from "@mui/styles";
import  Button, createTheme, ThemeProvider  from "@mui/material";
import  useState  from "react";
const appTheme = createTheme(
  palette: 
    primary: 
      main: "#e56339"
    
  
);
const StyledDiv = styled("div")(( theme, ...props ) => (
  // background: theme.palette.primary?.main, //theme usage
  background: props?.toggled ? "red" : "blue"
));

export default function App() 
  const [toggle, setToggle] = useState(false);
  return (
    <div>
      <ThemeProvider theme=appTheme>
        <StyledDiv toggled=toggle>Styled div</StyledDiv>
      </ThemeProvider>
      <div style=margin:10>
      <Button variant="contained"  onClick=() => setToggle((pre) => !pre)>toggle</Button>
    </div>
    </div>
  );