title: Why is ThemeProvider (Material UI) not working for me here?
body: <p>I've used Material UI quite a lot, so this is baffling. I've looked through the docs, I've checked my code, I can't see the issue. I want my H2 tag in the nested component to use Arial. However, it's rendering using Times. I'm not sure why.</p>
  
  <p>Here's my index.tsx:</p>
  
  <pre><code>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(
    &lt;ThemeProvider theme={theme}&gt;
      &lt;Provider store={configureStore()}&gt;
        &lt;App /&gt;
      &lt;/Provider&gt;
    &lt;/ThemeProvider&gt;,
    document.getElementById("root")
  );
  
  serviceWorker.unregister();
  </code></pre>
  
  <p>My app component: </p>
  
  <pre><code>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 = () =&gt; {
      const theme = useTheme();
    return (
        &lt;div className="App"&gt;
            &lt;HeaderContainer /&gt;
        &lt;/div&gt;
    );
  };
  
  export default App;
  </code></pre>
  
  <p>The header container (will contain logic):</p>
  
  <pre><code>  import * as React from 'react';
  import Header from '../../../components/layout/header/Header';
  
  export interface HeaderContainerProps {
  }
  
  export default class HeaderContainer extends React.Component&lt;HeaderContainerProps&gt; {
    public render() {
      return &lt;Header /&gt;
    }
  }
  </code></pre>
  
  <p>And finally the header:</p>
  
  <pre><code>import * as React from "react";
  import { styled } from "@material-ui/core/styles";
  import AppBar from "@material-ui/core/AppBar";
  
  
  
  
  
  export default function Header() {
      return (
          &lt;AppBar&gt;
              &lt;h2&gt;Hello&lt;/h2&gt;
          &lt;/AppBar&gt;
      )
  }
  </code></pre>
  
  <p>I've tried putting the ThemeProvider in different components, but my h2 is still rendering as Times. Would be great if someone could spot the issue. Thanks</p>