Estoy tratando de aplicar cambios tipográficos al tema usando Material UI. Pero los cambios de objetos no funcionan. Sin embargo, la paleta está funcionando.

Traté de hacer algunos cambios en la variación H3 y también en el tamaño de fuente predeterminado, pero ninguno de los cambios funcionó.

Sin embargo, los colores de la paleta funcionan.

Aplicación.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;

Encabezado/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;

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

Si alguien puede ayudar, estaría muy agradecido.