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?