mui / mui/material-ui

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

Open
#33,785 4 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

customization: theme scope: tabs type: new feature
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Duplicates
  • I have searched the existing issues
Latest version
  • 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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox and reproduce the type errors for the Tabs variant and theme declaration using @mui/material 5.9.3 and TypeScript 4.5.5. Trace the Tabs component's TypeScript declarations and module-augmentation pattern, then verify that a custom variant passes type checks without @ts-ignore.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.