javascript - 无法让 Material UI 的自定义主题正常工作

Question

我正在尝试使用 Material UI 为我的应用创建自定义主题。看看如何做，我发现我必须使用 createTheme 和 ThemeProvider。但是由于某种原因，我的主题没有覆盖默认主题。在下面的代码中，您将能够看到我尝试用棕色覆盖原色，但默认的蓝色仍然存在。

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

const theme = createTheme({
    pallete: {
        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;

使成为：

有什么线索吗？