Почему ThemeProvider (Material UI) не работает для меня здесь? - PullRequest
Новая
       2

Почему ThemeProvider (Material UI) не работает для меня здесь?

0 голосов
/ 19 октября 2019

Я довольно часто использовал Material UI, так что это сбивает с толку. Я просмотрел документы, проверил свой код и не вижу проблемы. Я хочу, чтобы мой тег H2 во вложенном компоненте использовал Arial. Тем не менее, это рендеринг с использованием Times. Я не уверен, почему.

Вот мой index.tsx: 

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { Provider } from "react-redux";
import configureStore from "./redux/stores/main";
import * as serviceWorker from "./serviceWorker";
import { createMuiTheme } from "@material-ui/core";
import myTheme from "./styling/mainTheme";
import { ThemeProvider } from "@material-ui/styles";

const theme = createMuiTheme({
  typography: {
    fontFamily: ["Arial"].join(",")
  }
});

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Provider store={configureStore()}>
      <App />
    </Provider>
  </ThemeProvider>,
  document.getElementById("root")
);

serviceWorker.unregister();

Мой компонент приложения: 

import React from "react";
import { useSelector } from "react-redux";
import HeaderContainer from "../containers/layout/header/HeaderContainer";
import { ThemeProvider, useTheme } from "@material-ui/styles";
import theme from "../styling/mainTheme";
import { createMuiTheme } from "@material-ui/core";




const App: React.FC = () => {
    const theme = useTheme();
  return (
      <div className="App">
          <HeaderContainer />
      </div>
  );
};

export default App;

Контейнер заголовка (будет содержать логику):

  import * as React from 'react';
import Header from '../../../components/layout/header/Header';

export interface HeaderContainerProps {
}

export default class HeaderContainer extends React.Component<HeaderContainerProps> {
  public render() {
    return <Header />
  }
}

И, наконец, заголовок: 

import * as React from "react";
import { styled } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";





export default function Header() {
    return (
        <AppBar>
            <h2>Hello</h2>
        </AppBar>
    )
}

Я пытался поместить ThemeProvider в разные компоненты, но мой h2 по-прежнему отображается как Times. Было бы здорово, если бы кто-то мог определить проблему. Спасибо

1 Ответ

0 голосов
/ 19 октября 2019

Проверка документов материала-UI оказывается, что вы импортировали некоторые вещи из библиотеки неправильно. Как и в состоянии документации - 

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

Что в принципе может быть

import { useTheme, createMuiTheme } from '@material-ui/core/styles

То же самое касается ThemeProvider

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

...