Allow variant overrides in Card

[svrin]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Allow customizing the variants of card, similar to other elements. There is already CardPropsColorOverrides, so there should be a CardPropsVariantOverrides as well.

Motivation 🔦

We use the Card Componente for our product teaser and instead of wrapping the component, we would like directly to style the different variants.

[mnajdova]

Related to #27130 Basically if I understand correctly the issue, is about adding a new variant prop on the component, although it doesn't exist by default. Then this prop could be used for styling the component differently.

[svrin]

@mnajdova Yes, this sums it well.

[karlo-humanmanaged]

Looking at the Card, it seems to use PaperPropsVariantOverrides . So I created:

declare module "@mui/material/Paper" {
  // These variants should apply to Paper and any components that inherits Paper. e.g. Card
  export interface PaperPropsVariantOverrides {
    homeCard: true;
  }
}

but, Intellisense in Visual Studio Code is still unable to detect it:

[ameshkin]

I am also unable to create custom variants for MuiCard. I use php storm and it does recognize my custom variant. However, the variant simply doesn't work.

[JerdoAve]

I've found the following workaround in order to add variant to Card component:

1. Add variant to the Paper component
2. Add variant with the same name to the Card

Something like this:

    MuiPaper: {
      variants: [
        {
          props: { variant: 'gray' },
          style: {
            backgroundColor: 'gray
          }
        }
      ]
    },
  MuiCard: {
        variants: [
          {
            props: { variant: 'gray' },
            style: {
              border: 'none'
            }
          }
        ]
  }

3. Modify d.ts file

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

[nocodehummel]

@JerdoAve solution is working.
However it did not resolve my use-case to also utilize the variant for the CardHeader and CardContent.
My requirement would be that component variant classes are promoted to related sub-components.