Material UI - 主题样式 - 字体排版未生效。

Question

我正在尝试使用Material UI对主题进行排版更改。但是对象变化无效。然而，调色板有效。

我尝试对H3变体和默认字体大小进行一些更改，但是这些更改都不起作用。

但是，调色板上的颜色有效。

App.js

import React from "react";
import "./App.css";
import Header from "./components/ui/Header";
import { ThemeProvider } from "@material-ui/styles";
import theme from "./components/ui/Theme";

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

export default App;

Header/index.jsx

import React from "react";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import useScrollTrigger from "@mui/material/useScrollTrigger";
import Typography from "@mui/material/Typography";

function ElevationScroll(props) {
    const { children, window } = props;
    const trigger = useScrollTrigger({
        disableHysteresis: true,
        threshold: 0,
        target: window ? window() : undefined,
    });

    return React.cloneElement(children, {
        elevation: trigger ? 10 : 0,
    });
}

function Header() {
    return (
        <ElevationScroll>
            <AppBar color="primary">
                <Toolbar>
                    <Typography variant="h3" component="h3">
                        Nome de teste
                    </Typography>
                    <h3>Teste</h3>
                    Teste
                </Toolbar>
            </AppBar>
        </ElevationScroll>
    );
}

export default Header;

Theme.js

import { createTheme } from "@material-ui/core/styles";

const arcBlue = "#0B72B9";
const arcOrange = "#FFBA60";

export default createTheme({
    typography: {
        fontSize: 60,
        h3: {
            fontWeight: 500,
        },
    },
    palette: {
        common: {
            blue: `${arcBlue}`,
            orange: `${arcOrange}`,
        },
        primary: {
            main: `${arcBlue}`,
        },
        secondary: {
            main: `${arcOrange}`,
        },
    },
});

如果有人能够帮忙，我将非常感激。

- Maximilian Kaden

---

你正在从v4中导入ThemeProvider。请参考此链接。 - NearHuscarl

明白了，我之前引入的是：import { ThemeProvider } from "@material-ui/styles";但是根据文档，应该改为：import { ThemeProvider } from "@material-ui/core/styles";谢谢你的帮助！ - Maximilian Kaden

不，这只适用于v4，在v5中请使用@mui/material/styles。MUI v4和v5使用不同的样式库，因此v4的ThemeProvider无法与v5的样式API一起使用。 - NearHuscarl

文档在这个问题上似乎相当混乱。但是我按照您的通知进行了更改，它起作用了。非常感谢！ - Maximilian Kaden

Answer 1

解决方案

我正在从以下位置导入：

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

不过，根据文档，它需要是这样的：

import { ThemeProvider } from "@mui/material/styles";

- Maximilian Kaden