How to Add Custom Variant to Material-UI Component (React / Typescript)

Question

I am trying to create a custom component based on Material-ui component with additional styles.
So, for example, the Tab component has variant = ["standard","scrollable","fullWidth"], and I would like to add 'outlined' in variant.

This is my trial:

import Tabs, { TabsProps } from '@material-ui/core/Tabs';

export interface Test extends TabsProps {
    variant?: 'standard' | 'scrollable' | 'fullWidth' | 'outlined'
}

and return Tab with this variant prop.

export const MyTabs = (props: Test) => {
  return (
    if (props.variant === 'outlined') {
        return (
            <Tabs
                {...props}
            />
        );
    }
  );
}

But, it is having an error on console when I import this component and use. The message is :

Failed prop type: Invalid prop variant of value outlined supplied to ForwardRef(Tabs), expected one of ["standard","scrollable","fullWidth"].

How can I properly add more values in variant?

Answer 1

Include TabProps['variant'] as your Component Props variant and incorporate 'outlined'. Also, I believe the wrapping return statement shouldn't be there, not sure if it's a copy/paste issue:

import Tabs, { TabsProps } from "@material-ui/core/Tabs";

export interface Test extends TabsProps {
    variant?: TabsProps["variant"] | "outlined";
}

export const MyTabs = (props: Test) => {
    if (props.variant === "outlined") {
        return <Tabs {...props} />;
    }

    return //...
};