javascript - 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}`,
        },
    },
});

如果有人能提供帮助，我将不胜感激。

Answer 1

解决方案

我从以下位置导入:

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

但是，根据文档，它需要:

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