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

Question

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

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

如何使用我的自定义主题(在 MuiThemeProvider 中使用 @material-ui/core@3.9.3 库声明(与 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>;
}

但是，如果您在上述版本中具有具有 @material-ui/core 的组件并且您使用的是 @material-ui/styles 库，我的解决方案就可以工作。

提前谢谢你。

最好Fran

Answer 1

没有钩子

来使用MuiThemeProvider提供的上下文，但如果您可以使用ThemeProvider，则可以使用 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@^3.0.0-alpha.10 的 useTheme(( 不兼容。

解决方案由Material-UI的人在此链接中解释

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

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

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

。

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

谢谢你的帮助！

最好弗兰。