'React MUI: theme color custom prop not applied

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

Solution 1:^[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Artiom O

'React MUI: theme color custom prop not applied

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]