Как использовать useTheme hook из Material-UI? - PullRequest
Новая
       18

Как использовать useTheme hook из Material-UI?

0 голосов
/ 07 июня 2019

На сайте Material-UI приведен пример использования useTheme hook: https://material -ui.com / styles / advanced / # Тематика

И код здесь: 

    import React from 'react';
    import { ThemeProvider, useTheme } from '@material-ui/styles';

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

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

    function UseTheme() {
      return (
        <ThemeProvider
          theme={{
            spacing: '8px',
          }}
        >
          <DeepChild />
        </ThemeProvider>
      );
    }

    export default UseTheme;

Но это не показывает, как добавить тему. Когда я пытаюсь ввести некоторые свойства с помощью className, он ничего не делает. Код здесь: 

import React from "react";
import { ThemeProvider, useTheme } from "@material-ui/styles";

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

  return <div className={theme}> eldfo elo </div>;
}

function App() {
  return (
    <ThemeProvider
      theme={{
        spacing: "40px",
        color: "yellow",
        fontSize: "30px"
      }}
    >
      <DeepChild />
    </ThemeProvider>
  );
}

export default App;

У меня вопрос, как правильно его ввести?

1 Ответ

0 голосов
/ 07 июня 2019

Используйте его, как и любой другой React-хук: 

function App() {
  const theme = useTheme<Theme>()
  const space = theme.spacing(1)
  return <p>Space: {space}</p>
}

Обратите внимание, что вы получите полную тему.Если вы хотите получить какое-либо имя класса, вы должны использовать theme.className, но вы не определили свойство className в своем примере темы.

Вероятно, вам нужно сделать следующее: 

import React from "react";
import { ThemeProvider, useTheme } from "@material-ui/styles";

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

  return <div className={theme.divClass}> eldfo elo </div>;
}

function App() {
  return (
    <ThemeProvider
      theme={{
        divClass: {
          spacing: "40px",
          color: "yellow",
          fontSize: "30px"
        }
      }}
    >
      <DeepChild />
    </ThemeProvider>
  );
}

export default App;
...