Как правильно расширить кнопку Material UI в TypeScript? - PullRequest
Новая
       3

Как правильно расширить кнопку Material UI в TypeScript?

0 голосов
/ 20 октября 2019

Почти все здесь работает, за исключением того, что реквизит не проходит правильно. Я новичок в TypeScript, поэтому я знаю, что определенно ошибаюсь. Просто не могу разобраться с этим.

Попытка пользовательской ссылки 1 

const LoginSignupButton = withStyles({
  root: {
    color: rgba(Colors.white, 0.5),
    backgroundColor: rgba(Colors.white, 0.05),
    "&:hover": {
      color: rgba(Colors.white, 0.75),
      backgroundColor: rgba(Colors.white, 0.2)
    }
  }
})(Button);

export default LoginSignupButton;

Использование 1 

<LoginSignupButton component={Link} to={"/register"} fullWidth>
  Sign up for a free trial
</LoginSignupButton>

Ошибка 1 

Overload 1 of 2, '(props: Pick<DefaultComponentProps<ExtendButtonBaseTypeMap<ExtendButtonBaseTypeMap<{ props: { color?: "inherit" | "default" | "primary" | "secondary" | undefined; disableFocusRipple?: boolean | undefined; endIcon?: ReactNode; fullWidth?: boolean | undefined; href?: string | undefined; size?: "medium" | ... 2 more ... | undefined; startIcon?: ReactNode; variant?: "text" | ... 2 more ... | undefined; }; defaultComponent: "button"; classKey: ButtonClassKey; }>>>, "title" | ... 281 more ... | "variant"> & StyledComponentProps<...>, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '{ children: string; component: OverridableComponent<LinkTypeMap<{}, "a">>; to: string; className: string; fullWidth: true; }' is not assignable to type 'IntrinsicAttributes & Pick<DefaultComponentProps<ExtendButtonBaseTypeMap<ExtendButtonBaseTypeMap<{ props: { color?: "inherit" | "default" | "primary" | "secondary" | undefined; disableFocusRipple?: boolean | undefined; endIcon?: ReactNode; fullWidth?: boolean | undefined; href?: string | undefined; size?: "medium" |...'.
      Property 'component' does not exist on type 'IntrinsicAttributes & Pick<DefaultComponentProps<ExtendButtonBaseTypeMap<ExtendButtonBaseTypeMap<{ props: { color?: "inherit" | "default" | "primary" | "secondary" | undefined; disableFocusRipple?: boolean | undefined; endIcon?: ReactNode; fullWidth?: boolean | undefined; href?: string | undefined; size?: "medium" |...'.
  Overload 2 of 2, '(props: PropsWithChildren<Pick<DefaultComponentProps<ExtendButtonBaseTypeMap<ExtendButtonBaseTypeMap<{ props: { color?: "inherit" | "default" | "primary" | "secondary" | undefined; disableFocusRipple?: boolean | undefined; endIcon?: ReactNode; fullWidth?: boolean | undefined; href?: string | undefined; size?: "medium" | ... 2 more ... | undefined; startIcon?: ReactNode; variant?: "text" | ... 2 more ... | undefined; }; defaultComponent: "button"; classKey: ButtonClassKey; }>>>, "title" | ... 281 more ... | "variant"> & StyledComponentProps<...>>, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '{ children: string; component: OverridableComponent<LinkTypeMap<{}, "a">>; to: string; className: string; fullWidth: true; }' is not assignable to type 'IntrinsicAttributes & Pick<DefaultComponentProps<ExtendButtonBaseTypeMap<ExtendButtonBaseTypeMap<{ props: { color?: "inherit" | "default" | "primary" | "secondary" | undefined; disableFocusRipple?: boolean | undefined; endIcon?: ReactNode; fullWidth?: boolean | undefined; href?: string | undefined; size?: "medium" |...'.
      Property 'component' does not exist on type 'IntrinsicAttributes & Pick<DefaultComponentProps<ExtendButtonBaseTypeMap<ExtendButtonBaseTypeMap<{ props: { color?: "inherit" | "default" | "primary" | "secondary" | undefined; disableFocusRipple?: boolean | undefined; endIcon?: ReactNode; fullWidth?: boolean | undefined; href?: string | undefined; size?: "medium" |...'.

Попытка пользовательской ссылки 2 

class LinkButton extends React.Component<ButtonProps & LinkProps> {
  public render() {
    return <Button component={Link} {...this.props} />;
  }
}

const LoginSignupButton = withStyles({
  root: {
    color: rgba(Colors.white, 0.5),
    backgroundColor: rgba(Colors.white, 0.05),
    "&:hover": {
      color: rgba(Colors.white, 0.75),
      backgroundColor: rgba(Colors.white, 0.2)
    }
  }
})(LinkButton);

export default LoginSignupButton;

Использование 2 

<LoginSignupButton to={"/register"} fullWidth>
  Sign up for a free trial
</LoginSignupButton>

Ошибка 2 

Overload 1 of 2, '(props: Pick<{ action?: ((instance: ButtonBaseActions | null) => void) | RefObject<ButtonBaseActions> | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<unknown> | null | undefined; ... 7 more ...; TouchRippleProps?: Partial<...> | undefined; } & ... 7 more ... & Pick<...>, "color" | ... 296 more ... | "TypographyClasses"> & StyledComponentProps<...>, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '{ children: string; to: string; className: string; fullWidth: true; }' is not assignable to type 'IntrinsicAttributes & Pick<{ action?: ((instance: ButtonBaseActions | null) => void) | RefObject<ButtonBaseActions> | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<...> | null | undefined; ... 7 more ...; TouchRippleProps?: Partial<...> | undefined; } & ... 7 more ... & Pick<...>, "color" |...'.
      Property 'to' does not exist on type 'IntrinsicAttributes & Pick<{ action?: ((instance: ButtonBaseActions | null) => void) | RefObject<ButtonBaseActions> | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<...> | null | undefined; ... 7 more ...; TouchRippleProps?: Partial<...> | undefined; } & ... 7 more ... & Pick<...>, "color" |...'.
Overload 2 of 2, '(props: PropsWithChildren<Pick<{ action?: ((instance: ButtonBaseActions | null) => void) | RefObject<ButtonBaseActions> | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<unknown> | null | undefined; ... 7 more ...; TouchRippleProps?: Partial<...> | undefined; } & ... 7 more ... & Pick<...>, "color" | ... 296 more ... | "TypographyClasses"> & StyledComponentProps<...>>, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '{ children: string; to: string; className: string; fullWidth: true; }' is not assignable to type 'IntrinsicAttributes & Pick<{ action?: ((instance: ButtonBaseActions | null) => void) | RefObject<ButtonBaseActions> | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<...> | null | undefined; ... 7 more ...; TouchRippleProps?: Partial<...> | undefined; } & ... 7 more ... & Pick<...>, "color" |...'.
      Property 'to' does not exist on type 'IntrinsicAttributes & Pick<{ action?: ((instance: ButtonBaseActions | null) => void) | RefObject<ButtonBaseActions> | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<...> | null | undefined; ... 7 more ...; TouchRippleProps?: Partial<...> | undefined; } & ... 7 more ... & Pick<...>, "color" |...'.

В любом случае ошибка аналогична. Я просто не могу понять, как позаботиться об этом, поскольку я все еще довольно новичок в TypeScript.

...