3

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.

Dmitriif
  • 2,020
  • 9
  • 20
Eric Crescioni
  • 299
  • 3
  • 10

0 Answers0