Material-UI custom theme with createMuiTheme() is not working

Question

My implementation of the custom theme is straightforward, following official docs .

The code is as below, but the text ('Some Text Here') is taking an incorrect color #f50057, instead of the 'secondary' color that I have defined inside my custom theme. Probably I am missing something basic link here. And that incorrect color code its taking #f50057, I have no idea from where its picking up, as I have not defined that color code anywhere in my project.

import React from "react";
import { createMuiTheme, makeStyles } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";

const theme = createMuiTheme({
    palette: {
        primary: { main: "#2196f3" },
        secondary: { main: "#5F7D8E" },
        error: { main: "#f44336" }
    }
});

const useStyles = makeStyles(theme => ({
    topTitleText: {
        fontSize: "2.25rem",
        fontFamily: "Arial",
        fontWeight: "500",
        letterSpacing: "0.0075em",
        color: theme.palette.secondary.main
    }
}));

const MyComponent = props => {
    const classes = useStyles();

    return (
        <ThemeProvider theme={theme}>
            <React.Fragment>
                <div className={classes.topTitleText}>
                    Some Text Here
                </div>
            </React.Fragment>
        </ThemeProvider>
    );
};

export default MyComponent;

But if I comment out the 'color' field in useStyles() function and directly use the 'secondary' custom color inside the return() statement in the component as below, thats working as expected taking the correct 'secondary' color

const useStyles = makeStyles(theme => ({
    topTitleText: {
        fontSize: "2.25rem",
        fontFamily: "Arial",
        fontWeight: "500",
        letterSpacing: "0.0075em",
        // color: theme.palette.secondary.main
    }
}));

const MyComponent = props => {
    const classes = useStyles();

    return (
        <ThemeProvider theme={theme}>
            <React.Fragment>
                <div className={classes.topTitleText} color="secondary">Some Text Here</div>
            </React.Fragment>
        </ThemeProvider>
    );
};

These are the package versions I am using (from package.json)

    "@material-ui/core": "^4.8.3",
    "@material-ui/icons": "^4.5.1",
    "@material-ui/pickers": "^3.2.8",
    "@material-ui/styles": "^4.8.2",    
    "material-ui": "^0.20.2",

Answer 1

Problem is with

const useStyles = makeStyles(theme => ({ // this theme is comes from makeStyles function  
... 
color: theme.palette.secondary.main // so it will recive default color 

Solution is change your theme name to another one like

const custom_theme = createMuiTheme({

and use it like

const useStyles = makeStyles(theme => ({ 
... 
color: custom_theme.palette.secondary.main