6

I'm trying to apply typography changes to the theme using Material UI. But object changes are not working. However, the palette is working.

I tried to make some changes to the H3 variation and also to the default font size, but none of the changes work.

However, the colors on the palette work.

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

If anyone can help, I would be very grateful.

Maximilian Kaden
  • 312
  • 1
  • 3
  • 13
  • 1
    You're importing `ThemeProvider` from v4. See [this](https://mui.com/guides/migration-v4/#mui-styles). – NearHuscarl Oct 12 '21 at 20:03
  • Got it, I was importing from: `import { ThemeProvider } from "@material-ui/styles";` However, according to the documentation, it needs to be: `import { ThemeProvider } from "@material-ui/core/styles";` Thank you for your help! – Maximilian Kaden Oct 12 '21 at 20:09
  • No, it's only for v4, in v5 use `@mui/material/styles`. MUI v4 and v5 uses different style libraries so v4 `ThemeProvider` wouldn't work with v5 styling API. – NearHuscarl Oct 12 '21 at 20:11
  • The documentation seems to be quite confusing on this issue. But I made the change as you informed, and it worked. Thank you very much ! – Maximilian Kaden Oct 12 '21 at 20:22

1 Answers1

9

Solution

I was importing from:

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

However, according to the documentation, it needs to be:

import { ThemeProvider } from "@mui/material/styles";
Maximilian Kaden
  • 312
  • 1
  • 3
  • 13