React MUI中useStyles接收状态参数时状态变更后样式未更新问题排查

可能的原因 #

• useCustomHook的状态变更未触发组件重渲染
  如果你自定义Hook内部的boolean1/boolean2没有通过useState/useReducer等React状态API管理，或者状态更新逻辑存在缺陷，会导致SomeComponent不会在两个布尔值变化时重渲染，useStyles自然不会重新执行生成新的样式类。
  排查方法：在组件内加一行console.log(boolean1, boolean2)，观察值变化时是否有日志输出，没有输出就是自定义Hook的更新逻辑存在问题。
• Material UI版本兼容性问题
  如果你使用的是Material UI v5版本，makeStyles本身已经是废弃API，对动态props的支持存在已知缺陷，不会自动响应props变更更新样式。
  解决方法：替换为v5官方推荐的styled组件或者sx属性实现动态样式，示例如下：

  const ContentBox = styled(Box, {
    shouldForwardProp: (prop) => prop !== 'boolean1' && prop !== 'boolean2'
  })<{boolean1: boolean, boolean2: boolean}>(({theme, boolean1, boolean2}) => ({
    display: 'flex',
    minHeight: `calc(100vh - ${boolean1 && !boolean2 ? 100 : 200}px) !important`
  }))
  // 组件内使用
  const SomeComponent = ({ children }) => {
    const {boolean1, boolean2} = useCustomHook();
    return <ContentBox boolean1={boolean1} boolean2={boolean2}>{children}</ContentBox>
  }
  

• 样式优先级被覆盖
  你已经给minHeight加了!important，但如果存在同权重的!important样式（比如行内样式、其他加载顺序更靠后的同类名样式），即使useStyles生成了新的样式，也会被更高优先级的规则覆盖，表现为样式未更新。
  排查方法：打开浏览器开发者工具的元素面板，检查Box元素的min-height属性，看是否被划掉，对应规则是否是你期望的最新计算值。
• 自定义Hook返回对象引用异常
  如果你在useCustomHook内部用useMemo缓存了返回的对象，且依赖列表漏写了boolean1/boolean2，会导致即使布尔值变化，返回的对象引用仍然不变，部分版本的makeStyles浅比较参数时会认为props没有变化，不会重新生成样式。
  解决方法：检查useCustomHook的缓存逻辑，确保依赖列表包含所有会变化的返回值属性，或者去掉不必要的useMemo包装。

内容的提问来源于stack exchange，提问作者Nikola Gigić