Typescript를 사용하여 재료 UI 구성 요소의 소품을 확장하는 방법은 무엇입니까?

Typescript를 사용하여 재료 UI 구성 요소의 소품을 확장하는 방법은 무엇입니까?

추가 소품을 아이들에게 전달할 수 있도록 Typescript를 사용하여 Button 구성요소의 소품을 Material-UI에서 확장하고 싶습니다.

import { NavLink } from 'react-router-dom';
import { Button } from 'material-ui';

<Button
  component={NavLink}

  // NavLink props that needs to be added to typescript declarations
  activeClassName={classes.activeButton}
  exact={true}
  to={to}
>
  {title}
</Button>

./app/types/material_ui.d.ts에 다음 선언을 추가하려고 했습니다.

declare module 'material-ui' {
  interface Button {
    activeClassName?: any;
    exact?: boolean;
    to?: string;
  }
}

"TS2693: 'Button'은 유형만 가리키지만 여기서 값으로 사용되고 있습니다."라는 오류가 발생합니다.

저는 선언문도 시도해 보았습니다.

import * as React from 'react';

import { PropTypes, StyledComponent } from 'material-ui';
import { ButtonBaseProps } from 'material-ui/ButtonBase';

declare module 'material-ui' {
  export interface ButtonProps extends ButtonBaseProps {
    color?: PropTypes.Color | 'contrast';
    component?: React.ReactNode;
    dense?: boolean;
    disabled?: boolean;
    disableFocusRipple?: boolean;
    disableRipple?: boolean;
    fab?: boolean;
    href?: string;
    raised?: boolean;
    type?: string;

    activeClassName?: any;
    exact?: boolean;
    to?: string;
  }

  export class Button extends StyledComponent<ButtonProps> { }
}

그러면 "TS2323: 내보낸 변수 '버튼'을 다시 선언할 수 없습니다"라는 오류가 발생합니다.

my tsconfig.json은 다음과 같습니다.

{
  "compilerOptions": {
    ...
    "paths": {      
      "history": ["./node_modules/@types/history/index"],
      "redux": ["./node_modules/@types/redux/index"],
      "react": ["./node_modules/@types/react/index"],
      "*": ["./app/types/*", "*"]
    },
  },
  ...
}

마지막으로 재료-UI의 원래 유형 정의:

import * as React from 'react';
import { StyledComponent, PropTypes } from '..';
import { ButtonBaseProps } from '../ButtonBase';

export interface ButtonProps extends ButtonBaseProps {
  color?: PropTypes.Color | 'contrast';
  component?: React.ReactNode;
  dense?: boolean;
  disabled?: boolean;
  disableFocusRipple?: boolean;
  disableRipple?: boolean;
  fab?: boolean;
  href?: string;
  raised?: boolean;
  type?: string;
}

export default class Button extends StyledComponent<ButtonProps> {}

저는 material-ui 1.0.0-beta.8을 react 15.6.1, react-router-dom 4.2.2 및 typescript 2.5.2와 함께 사용하고 있습니다.

조금 늦었지만, 여기 다른 해결책이 있습니다.구성요소 프롭의 MUI 문서 사용을 참조하십시오.다음 단추는 Link 구성 요소를 사용합니다.또한 링크의 특정 소품과 유형을 함께 사용합니다.그것은 또한 그들만의 독특한 소품들을 추가합니다.

import React from 'react'
import MuiButton, {ButtonProps} from '@material-ui/core/Button'

interface ButtonOptions {
    // your custom options with their types
  }

const Button = <C extends React.ElementType>(props: ButtonProps<C, {component?: C}> & ButtonOptions ) => {
  return <MuiButton {...props}>{props.children}</MuiButton>
}

export default Button
 
// use like this:  
import {Link} from 'react-router-dom'
<Button component={Link} to={'/somelocation'}>

import React, { FC } from 'react';

import { Button, ButtonProps } from '@material-ui/core';

interface IProps extends ButtonProps {} // your custom props

const ButtonHco: FC<IProps> = ({
  variant,
  color,
  children,
  size,
  disabled
}) => {
  return (
    <Button variant={variant} color={color} size={size} disabled={disabled}>
      {children}
    </Button>
  );
};

export default ButtonHco;

다음 코드는 저에게 적합합니다.

import { Button, StyledComponent } from 'material-ui';
import { ButtonProps } from 'material-ui/Button';

declare module 'material-ui' {
  export interface MyProps {

    exact?: boolean;
    to?: string;
  }
  export class Button extends StyledComponent<ButtonProps & MyProps> {
  }

}

저는 문제 없습니다."TS2693: 'Button' only refers to a type, but is being used as a value here.Typescript 2.5.2도 사용하고 있습니다.

다음은 재료 UI 버튼(테스트되지 않음)을 확장하는 미니멀리즘 샘플입니다.확장 필드는 단추 레이블 뒤에 간단히 추가됩니다.

import * as React from 'react';
import { ButtonProps } from '@material-ui/core/Button';
import { Button } from '@material-ui/core';

interface Props{
  extendedField: string;
}

export class MyExtendedButton extends React.Component<ButtonProps & Props>{
  render(){

    const {
      extendedField,
      children,
      ...buttonProps,
    } = this.props;

    return (<Button {...buttonProps}>
      {children}
      : <span style={{color: 'red'}}>
        {extendedField}
      </span>
    </Button>);
  }
}

언급URL : https://stackoverflow.com/questions/46152782/how-to-extend-props-for-material-ui-components-using-typescript