CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Maximilian Kaden
Maximilian Kaden

Reputation: 350

Material UI - Theme Style - typography not working

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.

Upvotes: 7

Views: 6908

Answers (1)

Maximilian Kaden
Maximilian Kaden

Reputation: 350

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";

Upvotes: 10

Related Questions