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库。 / p>

谢谢。

最好，弗兰

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中的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中

谢谢您的帮助！

最好，弗兰。

如何使用useTheme（）挂钩消耗我的自定义主题？

2 个答案: