As described in the migration docs (v4 to v5) I've added this to my theme:
import { createTheme, Theme } from '@mui/material/styles'
import { grey } from '@mui/material/colors'
declare module '@mui/styles/defaultTheme' { // <-- ts error
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {}
}
const { palette } = createTheme()
const { augmentColor } = palette
// Create a theme instance.
export const theme: Theme = createTheme({
palette: {
neutral: augmentColor({ color: { main: grey[400] } }),
}
})
But I get the ts error Invalid module name in augmentation, module '@mui/styles/defaultTheme' cannot be found.ts(2664)
What am I doing wrong?
As described in the migration docs (v4 to v5) I've added this to my theme:
import { createTheme, Theme } from '@mui/material/styles'
import { grey } from '@mui/material/colors'
declare module '@mui/styles/defaultTheme' { // <-- ts error
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {}
}
const { palette } = createTheme()
const { augmentColor } = palette
// Create a theme instance.
export const theme: Theme = createTheme({
palette: {
neutral: augmentColor({ color: { main: grey[400] } }),
}
})
But I get the ts error Invalid module name in augmentation, module '@mui/styles/defaultTheme' cannot be found.ts(2664)
What am I doing wrong?
Share Improve this question edited Oct 11, 2021 at 20:50 NearHuscarl 81.5k22 gold badges318 silver badges280 bronze badges asked Oct 11, 2021 at 14:04 user3142695user3142695 17.3k55 gold badges194 silver badges374 bronze badges 1- As of October 2022, the doc no longer mentions about "declare module '@mui/styles/defaultTheme'". So, I think that the declaration isn't necessary anymore – Hiroki Commented Oct 16, 2022 at 7:20
1 Answer
Reset to default 17I don't know why, but importing the module for side-effects fix it:
import { Theme } from "@mui/material/styles";
import "@mui/styles";
declare module "@mui/styles/defaultTheme" {
// eslint-disable-next-line @typescript-eslint/no-empty-interface (remove this line if you don't have the rule enabled)
interface DefaultTheme extends Theme {}
}