CODEWITHSUNDEEP
reactjsmaterial-uifrontendnext.js
bhav_yea
bhav_yea

Reputation: 63

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

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?

Upvotes: 1

Views: 2080

Answers (1)

Ramakay
Ramakay

Reputation: 3135

There is a typo - palette not pallete in your example!

const theme = createMuiTheme({
      palette: {
         primary: {
            main: '#abcdef',
           }
        }
     })

Upvotes: 1

Related Questions