'How can you add new variants to the Container component in MUI V5, using TS Module Augmentation?
I'm attempting to add a new variant to the Container component, directly in the ThemeOptions
.
The documentation explains that we need to use module augmentation to extend the interface so that the ts compiler knows about the new prop we are adding:
import { red } from '@mui/material/colors';
import { ThemeOptions } from '@mui/material/styles';
import '@mui/material/Container';
// -------------------
// This throws error:
// Duplicate identifier 'ContainerProps'.ts(2300)
// Container.d.ts(53, 13): 'ContainerProps' was also declared here.
// -------------------
declare module '@mui/material/Container' {
interface ContainerProps {
variant?: string;
};
}
const defaultThemeOpts: ThemeOptions = {
palette: {
primary: {
main: '#1BA4DD',
},
secondary: {
main: '#094074',
},
error: {
main: red.A400,
},
},
components: {
MuiContainer: {
variants: [
{
props: { variant: 'centered' },
style: {
textAlign: 'center',
},
},
],
},
},
};
export default defaultThemeOpts;
MUI V5 documentation isn't very clear on how to tackle this and I'm a bit confused as to why module augmentation is not working here.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|