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

Question

我在声明我的 MuiProvider 时有一段代码，像这样：

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

我如何使用 Material-UI 挂钩（在@material-ui/styles@3.0.0-alpha.10) 或使用其他带有 Hooks 的解决方案？

编辑：您可以这样消费：

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

function MyComponent() {
  const theme = useTheme();

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

BUT 我的解决方案有效 IF 你在上面的版本中有带有 @material-ui/core 的组件并且你正在使用 @ material-ui/styles图书馆。

提前致谢。

最好的，弗兰

Answer 1

没有钩子可以使用 MuiThemeProvider 提供的上下文，但是如果您可以使用 ThemeProvider instead you can use the useTheme 钩子来使用树中提供程序下方的组件中的主题。

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

function MyComponent() {
  const theme = useTheme();

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

Answer 2

customTheme 不能与 useTheme() 一起使用，因为我使用的是 @material-ui/core@3.9.3 的 ThemeProvider，它与 @material-ui/styles@ 的 useTheme() 不兼容^3.0.0-alpha.10.

this link

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

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

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

install();

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

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

中

感谢您的帮助！

最好的，弗兰.

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

How is possible consume my custom Theme with useTheme() hook?

reactjs

material-ui

react-hooks