为什么 ThemeProvider (Material UI) 在这里对我不起作用？

Question

我经常使用 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。如果有人能发现这个问题，那就太好了。谢谢

Answer 1

检查 material-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';

Answer 2

在MUI V5 中，您需要从@mui/material/styles 导入ThemeProvider 和createTheme 而不是@mui/styles。

import * as React from 'react';
import ReactDOM from 'react-dom';
import {red} from '@mui/material/colors';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: red[500],
    },
  },
});

function App() {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
}

ReactDOM.render(<App />, document.querySelector('#app'));

source