使用 createMuiTheme() 的 Material-UI 自定义主题不起作用答案

【问题标题】：Material-UI custom theme with createMuiTheme() is not working使用 createMuiTheme() 的 Material-UI 自定义主题不起作用
【发布时间】：2020-05-02 23:04:35
【问题描述】：

我的自定义主题的实现很简单，遵循official docs。

代码如下，但文本（'Some Text Here'）采用了不正确的颜色#f50057，而不是我在自定义主题中定义的'次要'颜色。可能我在这里遗漏了一些基本链接。而且那个不正确的颜色代码占用了#f50057，我不知道它是从哪里开始的，因为我没有在我的项目中的任何地方定义那个颜色代码。

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;

但是，如果我注释掉 useStyles() 函数中的“颜色”字段并直接在组件中的 return() 语句中使用“次要”自定义颜色，如下所示，那将按预期工作，采用正确的“次要”颜色

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>
    );
};

这些是我正在使用的包版本（来自 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",

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

问题出在

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

解决方案是change your theme name to another one like

const custom_theme = createMuiTheme({

并像使用它一样

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

【讨论】：

非常感谢@Prakash。像魅力一样工作。