如何向 Material-UI 组件添加自定义变体（React / Typescript）

Question

我正在尝试创建一个 基于 Material-ui 组件的自定义组件，并带有其他样式。
因此，例如，Tab 组件有variant = ["standard","scrollable","fullWidth"]，我想在variant 中添加'outlined'。

这是我的试验：

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

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

并使用此变体属性返回 Tab。

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

但是，当我导入此组件并使用时，控制台出现错误。 消息是：

道具类型失败：提供给ForwardRef(Tabs) 的道具variant 的价值outlined 无效，应为["standard","scrollable","fullWidth"] 之一。

如何在变体中正确添加更多值？

Answer 1

将TabProps['variant'] 包含为您的组件道具variant 并合并'outlined'。

编辑：正如 mattwad 在 cmets 中解释的那样，在扩展接口时省略此属性，然后将其包含在自定义接口中。

另外，我认为包装 return 语句不应该存在，不确定是否是复制/粘贴问题：

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

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

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

    return //...
};