时间戳

首页 > 解决方案 > 如何向 Material-UI 组件添加自定义变体（React / Typescript）

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

问题描述



我正在尝试基于具有其他样式的 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}
            />
        );
    }
  );
}

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

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

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

标签： reactjstypescriptmaterial-ui

解决方案

包括TabProps['variant']作为您的组件道具variant并合并'outlined'.

编辑：正如 mattwad 在评论中解释的那样，在扩展界面时省略此道具，然后将其包含在自定义的界面中。

另外，我认为包装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 //...
};

推荐阅读