Tabs component Typescript types can't be extended for custom variants

[vonkanehoffen]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

As shown in this sandbox: https://codesandbox.io/s/mui-tabs-variant-issue-lk9v5c?file=/src/App.tsx

While I can add a new variant for Button and have it pass type checks via module augmentation, if I try the same thing for Tabs with:

declare module "@mui/material/Tabs" {
  interface TabsPropsVariantOverrides {
    outlined: true;
  }
}

both the theme declaration and component variant prop don't pass type checks.

Expected behavior 🤔

I should be able to add a custom variant to Tabs and have it pass TS type checks. I shouldn't have to @ts-ignore it.

Steps to reproduce 🕹

Steps:

1. Go to this sandbox: https://codesandbox.io/s/mui-tabs-variant-issue-lk9v5c?file=/src/App.tsx:1018-1055
2. Note variant displays an error

Context 🔦

I'm creating a new custom theme variant for tabs.

Your environment 🌎

@mui/material 5.9.3

typescript 4.5.5

[siriwatknp]

@vonkanehoffen I don't think Tabs' variant can be extended at this point because it is not just about styling, there is some logic attached to.

Do you want to extend the variant to have full control of the logic as well?

[vonkanehoffen]

Oh right. No I just want to apply style via the variant. In this case I have two layers of tabs and I want the lower one to be outlined like so:

It works fine except for the TS error.

[thomasmery]

trying to achieve something similar

wanted to be able to only have to add a 'pills' variant to the Tabs component and style it via the theme components.MuiTabs.variant key

it seems counter productive to have to create a custom Tab component (event just styled()) to do this

any chance to get feedback on this from the mui team?

how would we go about augmenting the 'variant' prop?

thanks