Question

嗨，我不确定这是错误还是我很感激有人可以帮助我。

我在 SSR 中使用了 Next.js v10+ 和 Material-UI 和 React Redux / Redux。实际上我有一个 Redux Prop 传递给 useStyles：

const extended = useSelector(state => state.someStore.extended);
const classes = useStyles({
    extended
});

并在 makeStyles 中使用：

toolbar: {
    height: props => props.extended ? 180 : 600
}

当更新事件“扩展”时，会发生重新渲染。但是，“扩展”保留了旧值 180 而不是 600。

以上在开发模式下没问题，但在 SSR 中是有问题的。我尝试在 SSR 中使用样式组件，它按预期工作。

我是否遗漏了 Material UI + Redux + SSR 中的一些配置？非常感谢。

Answer 1

Redux/React Redux 很好。我必须使用 clsx 来解决问题。

（以下代码均为Next.js SSR的案例）

案例 1（有效！）：

<Toolbar className={clsx(classes.toolbar, expanded && classes.expanded)} />
const useStyles = makeStyles(theme => ({
    toolbar: {
        height: 180
    },
    expanded: {
        height: 600
    }
}));

CASE 2（它不起作用！（我的原创作品）：

const classes = useStyles({ expanded });
<Toolbar className={classes.toolbar} />
const useStyles = makeStyles(theme => ({
    toolbar: {
        height: props => props.expanded ? 600 : 180
    }
}));

案例 3（有效！）：虽然像这样使用样式组件很好：

<Toolbar expanded={expanded} />
const Toolbar = styled.div`
    height: ${props => props.expanded ? '600px' : '180px'};
`;

Answer 2

我认为问题在于您试图将 expanded 道具传递给 useStyles 钩子，但它不希望有任何参数。要使其工作，您可以尝试以下操作：

const useStyles = ({ expanded }) =>
  makeStyles({
    toolbar: {
      height: expanded ? 180 : 600
    }
  });

const SomeComponent = () => {
  const expanded = useSelector(state => state.someStore.expanded);
  const classes = useStyles({ expanded })();

  return <Toolbar className={classes.toolbar} />;
}

您也可以参考this example

使用（Material-ui + React Redux + SSR 中的 Next.js）重新渲染未更新传递的属性

2 个答案: