How to use Material UI's ThemeProvider with next.js? - reactjs

Question

I want to pallete of the theme for my next.js app.
I'm very new to next.js so please be kind. I can give more info if something specific is required.
This is my index.js
import Navbar from "../src/components/navbar";
import Frontpage from "../src/components/frontpage ";
import { Grid, ThemeProvider, createMuiTheme } from "#material-ui/core";
const theme = createMuiTheme({
pallete: {
primary: {
main: '#abcdef',
}
}
})
function Index() {
return (
<ThemeProvider theme={theme}>
<Grid container justify="center" style={{ scrollBehavior: "smooth" }}>
<Grid item xs={9}>
<Navbar />
<Frontpage />
</Grid>
</Grid>
</ThemeProvider>
);
}
export default Index;
This is my Frontpage.js
import Grid from "#material-ui/core/Grid";
import { Button } from "#material-ui/core";
import styles from "../styles/_homeview.module.scss";
const Frontpage = () => {
return (
<>
<Grid item className={styles.homehead}>
Heading 1
</Grid>
<Grid item xs={6} className={styles.homeTagLine}>
lorem ipsum for, lets say around 30 words
</Grid>
<Button variant="contained" color="primary">
Contact Us
</Button>
</>
);
};
export default Frontpage;
Here I expect the button to be of color specified in the theme (#abcdef) but its the default Material UI theme color.
How can I fix (apply/modify) the default Material UI theme?

Answer 1

There is a typo - palette not pallete in your example!
const theme = createMuiTheme({
palette: {
primary: {
main: '#abcdef',
}
}
})