将数据属性与 Material UI 和 Typescript 结合使用

Question

我正在尝试向 React 中的按钮添加 data-test-id 属性，但 Typescript 对此很生气。如何将此属性添加到所有材质组件？

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

<Button dataTestId='my-test-id'>
  Click Me!
</Button>

打字稿错误：

TS2769: No overload matches this call.
  Overload 1 of 3, '(props: { href: string; } & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; fullWidth?: boolean; href?: string; size?: "medium" | ... 1 more ... | "small"; startIcon?: ReactNode; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type '{ children: string; endIcon: Element; variant: "text"; style: { textTransform: "lowercase"; }; onClick: (event: MouseEvent<HTMLElement, MouseEvent>) => void; dataTestId: string; }' is not assignable to type 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; ... 5 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>'.
      Property 'dataTestId' does not exist on type 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; ... 5 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>'.
  Overload 2 of 3, '(props: { component: ElementType<any>; } & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; ... 4 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Property 'component' is missing in type '{ children: string; endIcon: Element; variant: "text"; style: { textTransform: "lowercase"; }; onClick: (event: MouseEvent<HTMLElement, MouseEvent>) => void; dataTestId: string; }' but required in type '{ component: ElementType<any>; }'.
  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ButtonTypeMap<{}, "button">>>): Element', gave the following error.
    Type '{ children: string; endIcon: Element; variant: "text"; style: { textTransform: "lowercase"; }; onClick: (event: MouseEvent<HTMLElement, MouseEvent>) => void; dataTestId: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; ... 4 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>'.
      Property 'dataTestId' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; ... 4 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>'.

所以，我基本上想告诉 typescript 这dataTestId应该是任何 React 组件上的有效属性。

Answer 1

大小写对于数据属性来说并不重要，并且通常包含连字符。这正是在按钮上添加数据属性的方法：

<Button data-testid='my-test-id'>
  Click Me!
</Button>