Next.js Discord

Discord Forum

Issues adding MUI to Next

Answered
Sloth bear posted this in #help-forum
Open in Discord
Sloth bearOP
I'm trying to add MUI to my Next project, most importantly I'm trying to create a custom Theme. I followed the guide provided by MUI (https://mui.com/material-ui/guides/next-js-app-router/) but I'm getting some errors that I can't seem to resolve.

Type '{ primary: { main: string; }; black: string; white: string; }' is not assignable to type 'PaletteOptions'.

I created a theme.d.ts file to handle this (see picture). Usually this fixes the type error, but this time is won't go away for some reason.

Would anyone know why that is?

Also, is the guide from MUI the optimal way to integrate MUI into Next 13 (router)?
Answered by Sloth bear
Don't need the help anymore. For whatever reason, my project wasn't reading my Typescript Augments. Weird behavior. But adding them directly with my theme file works.
View full answer

2 Replies

Sloth bearOP
Don't need the help anymore. For whatever reason, my project wasn't reading my Typescript Augments. Weird behavior. But adding them directly with my theme file works.
Answer
Singapura
Hi @Sloth bear Can you give that your customized object value as type - PaletteOptions?
Ex:

import { PaletteOptions } from 'mui ... ';

const myCustom: PaletteOptions = {
  primary: {
    main: 'black'
  };
  black: '#111111',
  white: '#eeeeee'
};

...
theme = myCustom;
...


Hope this would help you