MUI V5 Variant Overrides-CodePudding

I'm trying to add to the variant within MUIPaper and I'm not sure what I'm doing wrong. The types on the component are:

variant?: OverridableStringUnion<'elevation' | 'outlined', PaperPropsVariantOverrides>;

How do I extend the variant prop using PaperPropsVariantOverrides. My expected outcome is:

variant?: 'elevation' | 'outlined' | 'grey' | 'white',

Component: Paper.tsx

import React from 'react';
import MUIPaper, { PaperProps as MuiPaperProps } from '@mui/material/Paper';
import { PaperPropsVariantOverrides } from '@mui/material';

export interface PaperPropsVariantOverrides {
  variant: 'grey' | 'white';
}

export type PaperProps = MuiPaperProps;

const Paper: React.FC<PaperProps> = (props) => {
  const { ...paperProps } = props;

  return <MUIPaper variant="grey" {...paperProps} />;
};
export default Paper;

CodePudding user response：

<MUIPaper variant="grey" {...paperProps} />

No need the interface. just add a CSS with the class like ".MuiPaper-grey", the the style will be change

CodePudding user response：

You can extend by declaring the override module like so:

declare module '@mui/material/Paper' {
  interface PaperPropsVariantOverrides {
    myAwesomeVariant: true;
  }
}

then inside of your theme you can define the style for the variant:

export const theme = createTheme({
  components: {
    MuiPaper: {
      variants: [
        {
          props: { variant: "myAwesomeVariant" },
          style: { border: "1px solid red" },
        },
      ]
    }
  }
});

Then you should be able to use it

<Paper variant="myAwesomeVariant">Stuff</Paper>

It's described better here https://mui.com/customization/theme-components/#adding-new-component-variants