Как можно использовать мою пользовательскую тему с помощью крючка useTheme ()? - PullRequest
Новая
       14

Как можно использовать мою пользовательскую тему с помощью крючка useTheme ()?

1 голос
/ 11 апреля 2019

У меня есть фрагмент кода, когда я объявляю свой 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) или с другим решением с крючками?

РЕДАКТИРОВАТЬ: Вы можете использовать следующим образом: 

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

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

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

НО мое решение работает ЕСЛИ у вас есть компоненты с @ material-ui / core в вышеуказанной версии, и вы используете библиотеку @ material-ui / styles.

Заранее спасибо.

Лучший, Фрэн

Ответы [ 2 ]

2 голосов
/ 11 апреля 2019

Нет крючка для использования контекста, предоставленного MuiThemeProvider, но если вы можете использовать вместо него ThemeProvider, вы можете использовать крюк useTheme для потреблениятема в компоненте, который находится ниже провайдера в дереве. 

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

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

  return <div>{`spacing ${theme.spacing}`}</div>;
}
0 голосов
/ 11 апреля 2019

customTheme не работал с useTheme () из-за того, что я использовал ThemeProvider из @ material-ui / core @ 3.9.3, и он не был совместим с useTheme () из @ material-ui / styles @ ^ 3.0.0-alpha.10.

Решение объясняется ребятами из Material-UI в по этой ссылке

По сути, вы должны добавить вверху, когда нет материала-UI был импортирован еще эти строки: 

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

install();

И ThemeProvider и остальные компоненты будут совместимы для компонентов библиотеки @ material-ui / styles

PD: Это временнопотому что крючки еще не в @ материал / ядро, но они будут в v4

Спасибо за помощь!

Best, Fran.

...