React MUI: theme color custom prop not applied

Question

I have 2 themes, dark mode and light mode:

import { styled, alpha, ThemeProvider, createTheme } from '@mui/material/styles';

//I use the dark theme only
const themeLight = createTheme({
... 
})

const themeBlack = createTheme({
    palette: {
        background: {
            default: "#262626",
            paper: "#262626"
        },
        primary: {
            main: "#FEB139",
            light: "#FEB139",
            dark: "#FEB139",
        },
        secondary: {
            main: "#143F6B"
        },
        tertiary: {
            main: "#FFBC80"
        },
        base: {
            main: "#F55353"
        },
        info: {
            main: "#FEB139",
            light: "#FEB139",
            dark: "#FEB139"
        },
        text: {
            default: "#FF9F45"
        },
        shadow: "rgba(118, 118, 118, 0.23)",
        mode: "dark",
    },
    typography: {
        body1: {
            color: "#FF9F45"
        },
        h1: {
            color: "#FF9F45"
        },
        h2: {
            color: "#FF9F45"
        },
        h3: {
            color: "#FF9F45"
        },
        h4: {
            color: "#FF9F45"
        },
        h5: {
            color: "#129F65"
        },
        h6: {
            color: "#FF9F45"
        },
    },
    root: {
        color: "#F55353"
    },
    card: "#111111",
    top: "#1E1E1E",
    line: "#111111",
    title: {
        font: "'Lato', sans-serif",
        size: 22,
        weight: 600,
        color: "#FEB139",
    },
    gradient: "linear-gradient(274deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 0%,#FEB139 0%, #F55353 100%)",
    maxPadding: 80,
    minPadding: 10,
    drawerWidth: 240,

});

export { themeLight, themeBlack };

On some pages, it works fine, but on some specific ones it doesn't. The problem aappears generally on all components, but I will focus right now on typography.

<Typography variant="h4">
    Login
</Typography>

As you might see, in the theme object, #FF9F45 is the specified color, but for some reason it is not applied. Checking the styles using the Chrome dev tools, the color seems to be overridden by the default one

Answer 1

The component/page had another theme nested inside:

const theme = createTheme();

<ThemeProvider theme={theme}>
...
</ThemeProvider>

The mui basic templates include separate themes for each component, so thats how it got there.