Question

我有一个使用 MUI 的 React 项目，该项目当前具有主题状态（浅色或深色）。我在我的组件中使用 makeStyles/useStyles 自定义钩子模式。我将我的主题状态作为道具传递给组件中的 useStyles 调用，但是当主题更改时它不会更新组件。例如：

export const useStyles = makeStyles({
    layout: ({ theme }: Props) => theme === LIGHT ?
        lightObject... : darkObject...,
    ...rest
})

const Layout = ({ theme, children }: Props) => {
    const { layout } = useStyles({ theme })

    return (
        <Box className={layout}>
            {children}
        </Box>
    )
}

在下面的组件（上面的组件的父组件）中调用setTheme，我假设因为这个父组件改变了状态，它应该重新渲染子组件。然而，这种情况并非如此。我发现了一个“hacky”修复，如下所示，使用主题作为键：

// Theme, DARK, LIGHT are Typescript and Globals defined elsewhere
const App = () => {
  const [theme, setTheme] = useState<Theme>(DARK)
  const toggleTheme = () => setTheme(theme === LIGHT ? DARK : LIGHT)

  return (
    <div key={theme}>
      <Layout theme={theme}>{some child...}</Layout>
    </div>
  );
}

添加密钥时，我强制重新渲染。然而，这又让人感觉很糟糕。有一个更好的方法吗？我真的不喜欢使用 ThemeProvider 仅仅因为这是一个足够小的应用程序，我喜欢添加大量自定义和设计特定元素。我也不想使用样式组件 API。

带有主题更新的 MUI makeStyles/useStyles 钩子不重新渲染组件

0 个答案: