为什么我的 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

标签： javascript reactjs material-ui navbar styled-components

【解决方案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>
  );
}

【讨论】：