'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