迁移至Gatsby后Material UI makeStyles条件CSS渲染始终为true问题

问题原因 #

你遇到的问题是Material UI v4 makeStyles 的回调参数规则导致的，核心有两点：

1. makeStyles 样式属性的回调函数第一个参数固定为MUI的theme对象，第二个才是你传入的组件props。你把第一个参数命名为aboutMe，实际拿到的是永远为真值的theme对象，所以条件判断永远返回true。
2. 你在调用useStyles时没有传入组件props，就算参数顺序对也拿不到aboutMe的值。

修复方案 #

方案1：调整makeStyles写法（保持动态属性写法） #

// 组件内调用useStyles时传入props
const classes = useStyles(props)

// 调整transform回调的参数顺序，从第二个参数（props）里取aboutMe
const useStyles = makeStyles({
  effect: {
    zIndex: 10,
    position: "absolute",
    bottom: 0,
    right: 0,
    transition: "0.5s",
    transform:  (_, props) => ( props.aboutMe ? "translateY(100%)" : "translateY(0%)"),
  },
})

方案2：类名条件拼接（更适配Gatsby SSR/SSG环境，避免渲染异常） #

这种写法不依赖makeStyles的动态props能力，在静态渲染场景下稳定性更高：

const useStyles = makeStyles({
  effect: {
    zIndex: 10,
    position: "absolute",
    bottom: 0,
    right: 0,
    transition: "0.5s",
    transform: "translateY(0%)"
  },
  effectActive: {
    transform: "translateY(100%)"
  }
})

// 组件内拼接类名
<div className={`${classes.effect} ${aboutMe ? classes.effectActive : ''}`}>
  <StaticImage
    src="../../images/backgroundEffect.png"
    alt="effect"
    quality={50}
    draggable={false}
  />
</div>

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