Material UI自定义主题无法生效，createTheme配置primary色未覆盖默认值

问题原因 #

主题配置的核心字段拼写错误，你把MUI要求的调色板配置字段palette错误写成了pallete，导致框架无法识别自定义颜色配置，自动回退到了默认的蓝色主题。

解决方法 #

修正主题配置中的字段拼写即可，修改后的完整代码如下：

import {Button} from "@material-ui/core";
import {createTheme, ThemeProvider} from "@material-ui/core"
import {makeStyles} from "@material-ui/core";

const theme = createTheme({
    // 修正拼写：pallete → palette
    palette: {
        primary: {
            main: '#923223'
        }
    }
})

const App = () => {
    return (
        <ThemeProvider theme={theme}>
            <div style={{backgroundColor: '#f8f8f8', height: '100%'}}>
                <Button variant="contained" color="primary">algo</Button>
            </div>
        </ThemeProvider>
    );
}

export default App;

修改完成后重新运行项目，primary主色就会生效为你设置的棕褐色。

内容的提问来源于stack exchange，提问作者Juan Cruz Carrau