Это правильный способ расширения компонентов Material-UI (React / Typescript) - PullRequest
Новая
       11

Это правильный способ расширения компонентов Material-UI (React / Typescript)

0 голосов
/ 10 ноября 2019

Я пытаюсь расширить компоненты material-ui как свой собственный компонент с пользовательскими свойствами. Я использую responsejs w / typescript.

Нижеприведенный код является моей пробной версией: 

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

Итак, что я пытаюсь сделать сейчас, так это вернуть кнопку с пользовательским стилем, когда вариант равен 'контрольная работа'.

Итак, мой первый вопрос 1. Как добавить новый вариант для кнопки?

второй вопрос 2. я должен передавать детей как 

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

все время, когда я расширяю компоненты Material-UI?

...