I have a theme using MUI and the custom colors aren't applying to some of my components.

Here's the theme:

import { createTheme, ThemeProvider } from "@mui/material/styles";

...

const theme = createTheme({
    typography: {
        fontSize: 16,
        fontFamily: [
            "Inter",
            "-apple-system",
            "BlinkMacSystemFont",
        ].join(","),
        h1: {
            fontSize: "2rem",
            fontWeight: 500,
        },
        h2: {
            fontSize: "1.5rem",
            fontWeight: 400,
        },
    },
    palette: {
        primary: {
            main: "#4C5D88",
        },
        secondary: {
            main: "#DBE0EB",
        },
        tertiary: {
            main: "#F8F9FF",
        },
// Added all of the attributes here in case that was the reason it didn't work
        white: {
            light: "#FFFFFF",
            main: "#FFFFFF",
            dark: "#FFFFFF",
            contrastText: "#FFFFFF", 
        },
        error: {
            main: "#FFEED6",
        },
        errorlight: {
            main: "#DBE0EB",
        },
        success: {
            main: "#8EDCA9",
        },
        accent1: {
            main: "#3395E7", // lighter blue
        },
        accent2: {
            main: "#E3F2FF", // darker blue
        },
        accent3: {
            main: "#E86CAF", // pink
        },
    },
});

And it's applied with a ThemeProvider:

<ThemeProvider theme={theme}>
  {/* various components */}
</Theme>

But, when I try to do something basic, like a <Grid> component with <Typography> inside of the ThemeProvider, the custom colors don't apply:

<Grid
    item
    sx={{
        backgroundImage: "url(...)",
        color: "white", // tried this as an experiment, too
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column",
    }}
>
    <Typography variant="h1" color="white" gutterBottom>
        This text should be white.
    </Typography>
</Grid>

Colors like primary and secondary work just fine, but none of the custom colors do, and I can't figure out why after trying a few different things (like checking for different dark/light modes, etc). The color default is always rgba(0, 0, 0, 0.87);, if that helps.

Thanks in advance!

CodePudding user response：

There are various approaches here.

1. You could create variants for specific components that are using the desired colors right away in the theme object. (I am not providing an example since it goes a bit beyond the palette approach you are looking for).

2. You can use the styled() utility in order to create a component that is utilising the desired color and import it where you need it.:

import { styled } from "@mui/system";
import Typography from "@mui/material/Typography";

const WhiteTypography = styled(Typography)(({ theme }) => ({
  color: theme.palette.white.main
}));


// Import & use it somewhere
<WhiteTypography variant="h1" gutterBottom>
  This text should be white.
</WhiteTypography>

3. You can reference the theme object right away in your Typography component:

import { theme } from "../yourthemepath/theme.js";
...
<Typography
 variant="h1"
 gutterBottom
 color={theme.palette.accent1.main}
>
 This text should be accent1.main.
</Typography>

See it working here: https://codesandbox.io/s/goofy-williamson-dndbub?file=/src/App.js:527-706

CodePudding user response：

I ended up using the useTheme hook to do this. I don't really like how it looks (I didn't want to use sx for this) but it gets the job done.

I had to add color to the theme:

white: {
  main: "#FFFFFF",
  color: "#FFFFFF",
},

And this is how I imported it:

import { useTheme } from "@mui/material/styles";

// ...

const theme = useTheme();

// ...

<Grid
    item
    sx={{
        backgroundImage: "url(...)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column",
    }}
>
    <Typography variant="h1" sx={{ color: theme.palette.white }} gutterBottom>
        This text should be white.
    </Typography>
</Grid>