reactjs - Er det en korrekt måde at udvide Material-UI komponenter på (React/Typescript)

Jeg forsøger at udvide material-ui komponenter som min egen komponent med brugerdefinerede egenskaber. Jeg bruger reactjs med typescript.

Nedenstående kode er mit forsøg:

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

Så det, jeg prøver at gøre nu, er at returnere en brugerdefineret stylet knap, når varianten er 'test'.

Så mit første spørgsmål er
1. Hvordan tilføjer man en ny variant til knappen?

det andet spørgsmål er
2. skal jeg give børnene videre som

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

hele tiden, når jeg udvider en material-ui komponent?

Svar #1

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

For dine spørgsmål: A. Udvid props, tilføj varianter til den interface, du ønsker. B. Ja, altid sådan som foreslået med Reacts officielle 'composition model' https://reactjs.org/docs/composition-vs-inheritance.html

Relaterede artikler