I'm trying to create a custom theme for my app using Material UI. Looking on how to do it, I found out I had to use the createTheme and the ThemeProvider. However for some reason, my theme is not overriding the default theme. In the following code you'll be able to see that I try to override the primary color with a brownish color, yeth the default blue still persists.

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;

Render:

Any clue to what's going on?