Question

我正在尝试根据具有其他样式的Material-ui组件创建一个自定义组件。
因此，例如，Tab组件的变体= [“ standard”，“ scrollable”，“ fullWidth”]，我想在变体中添加“概述”。

这是我的审判：

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的值为outlined的道具ForwardRef(Tabs)无效，应该是[“ standard”，“ scrollable”，“ fullWidth”]之一。

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

Answer 1

包括TabProps['variant']作为分量道具variant，并合并'outlined'。另外，我认为包装return语句不应该存在，不确定是否存在复制/粘贴问题：

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 //...
};

如何向Material-UI组件添加自定义变体（反应/打字稿）

1 个答案: