如何将 Material UI 的 ThemeProvider 与 next.js 一起使用？

Question

我想为我的 next.js 应用添加主题。

我对 next.js 很陌生，所以请善待。如果需要具体内容，我可以提供更多信息。

这是我的 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;

这是我的 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;

在这里，我希望按钮具有主题中指定的颜色 (#abcdef)，但它是默认的 Material UI 主题颜色。

如何修复（应用/修改）默认 Material UI 主题？

Answer 1

在您的示例中有一个错字 - palette 而不是 pallete！

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