Reactjs 扩展材质UI组件（React/Typescript）是否正确

我正在尝试将material ui组件扩展为具有自定义属性的自己的组件。我正在使用带有typescript的reactjs

以下代码是我的试用版：

import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core';
import { Theme } from '@material-ui/core/styles/createMuiTheme';
import Tabs, { TabsProps } from '@material-ui/core/Tabs';

export interface Iprops extends TabsProps {
  /* how to add a variant ? */
}

const useStyles = makeStyles((theme: Theme) => ({
    root: {
       // styles
     }
}));

export const BasicTabs = (props: Iprops) => {
    const classes = useStyles(props);
    if (props.variant === 'test') {
        return (
            <Tabs
                {...props}
                className={clsx(classes.root, props.className)}
            />
        );
    }
    return (
        <Tabs {...props} />
    );
};

从“React”导入React；
从“clsx”导入clsx；
从“@material ui/core”导入{makeStyles}；
从“@materialui/core/styles/createMuiTheme”导入{Theme}；
从“@material ui/core/Tabs”导入选项卡，{TabsProps}；
导出接口Iprops扩展TabsProps{
/*如何添加变体*/
}
const useStyles=makeStyles（（主题：主题）=>({
根目录：{
//风格
}
}));
导出常量BasicTabs=（props:Iprops）=>{
常量类=使用样式（道具）；
如果（props.variant==='test'）{
返回(
);
}
返回(
);
};

所以，我现在要做的是在变量为“test”时返回一个自定义样式的按钮

所以，我的第一个问题是
1。如何向按钮添加新的变体？

第二个问题是
2。我应该像

<Tabs {...props}>{props.children}</Tabs>

{props.children}

每当我扩展物料ui组件时？

从“React”导入React
import React from 'react'
import TextField, { StandardTextFieldProps } from '@material-ui/core/TextField'

/**
 * Extend properties
 */
export interface PasswordProps extends StandardTextFieldProps {
    custom: string
}

/**
 * Password input
 * @param props Properties
 */
export const PasswordField: React.FunctionComponent<PasswordProps> = (props) => {
    props = Object.assign({ type: 'password' }, props)
    return (
        <TextField {...props}>
            {props.children}
        </TextField>
    )
}

从“@material ui/core/TextField”导入TextField，{StandardTextFieldProps}
/**
*扩展属性
*/
导出接口PasswordProps扩展了StandardTextFieldProps{
自定义：字符串
}
/**
*密码输入
*@param props属性
*/
导出常量密码字段：React.FunctionComponent=（props）=>{
props=Object.assign（{type:'password'}，props）
返回(
{props.children}
)
}

关于您的问题： A.扩展道具，向所需界面添加变体。 B.是的，总是像React官方“合成模型”建议的那样