如何使用 useTheme() 钩子使用我的自定义主题？

Posted 2023-02-22

【中文标题】如何使用 useTheme() 钩子使用我的自定义主题？

【英文标题】：How is possible consume my custom Theme with useTheme() hook?

【发布时间】：2019-09-02 04:04:13

【问题描述】：

我在声明我的 MuiProvider 时有一段代码，如下所示：

<MuiThemeProvider theme=merge(defaultGlobalTheme, this.props.adjustThemeOptions)>
    this.props.children
</MuiThemeProvider>

如何使用 Material-UI Hooks（在 @material-ui/styles@3.0.0-alpha.10 中声明）使用我的自定义主题（在 MuiThemeProvider 中使用 @material-ui/core@3.9.3 库声明）还是使用 Hooks 的其他解决方案？

编辑： 你可以这样消费：

import  useTheme  from '@material-ui/styles';

function MyComponent() 
  const theme = useTheme();

  return <div>`spacing $theme.spacing`</div>;

但是我的解决方案有效如果您在上述版本中有带有@material-ui/core 的组件并且您正在使用@material-ui/styles 库。

提前谢谢你。

最好， 弗兰

【参考方案1】：

没有使用MuiThemeProvider 提供的上下文的钩子，但是如果您可以使用ThemeProvider 代替，您可以使用useTheme 钩子来使用位于提供程序下方的组件中的主题树。

import  useTheme  from '@material-ui/styles';

function MyComponent() 
  const theme = useTheme();

  return <div>`spacing $theme.spacing`</div>;

【讨论】：

是的，但是我已经声明了一个带有新属性“调色板”的自定义主题，例如，当我尝试在样式规则中使用它时，会发布错误并显示以下消息：“属性面板未定义”。

@fg93 我的回答可能有误。 It works with a regular ThemeProvider at least。也许这不是你需要的？

是的，我需要那个，但是……我想我已经找到了问题所在。我想我是从 @material-ui/core/MuiThemeProvider 导入 ThemeProvider ，我需要相同但从 @material-ui/styles/ThemeProvider 并从 @material-ui/styles 调用 install() 方法。

【参考方案2】：

customTheme 不适用于 useTheme()，因为我使用的是来自 @material-ui/core@3.9.3 的 ThemeProvider，它与来自 @material-ui/styles@^3.0 的 useTheme() 不兼容.0-alpha.10.

Material-UI 的人在this link 中解释了解决方案

基本上，当尚未导入 Material-UI 时，您必须在顶部添加这些行：

import  install  from '@material-ui/styles';

install();

并且 ThemeProvider 和其余组件将兼容库 @material-ui/styles 的组件

PD：这是暂时的，因为钩子还没有在 @material/core 中，但它们会在 v4 中

感谢您的帮助！

最好， 弗兰。