Ошибка машинописи для атрибутов data- * в компоненте MaterialUI React

Question

Я пытаюсь передать атрибут data-testid компоненту Material-UI Select, но получаю следующую ошибку Typescript:

Type '{"data-testid": строка; } 'нельзя присвоить типу' HTMLAttributes '. Литерал объекта может указывать только известные свойства, а «data-testid» не существует в типе «HTMLAttributes».

Select.d.ts (111, 3): ожидаемый тип происходит из свойства «SelectDisplayProps» ', который объявлен здесь для типа' IntrinsicAttributes & SelectProps '

Это вызвано следующим кодом:

import React from "react";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

export default function MyComponent() {
    return (
        <Select SelectDisplayProps={{ "data-testid": "my-component" }}>
            <MenuItem value="1">One</MenuItem>
            <MenuItem value="2">Two</MenuItem>
            <MenuItem value="3">Three</MenuItem>
        </Select>
    );
}

Кажется, что это не проблема, когда data- * атрибуты передаются непосредственно компоненту (например, <Select data-testid="my-component" />), поэтому проблема в том, чтобы передать его в SelectDisplayProps.

Все, что SelectDisplayProps делает, это передает реквизиты дочернему элементу внутри <Select> ( документы ).

Как я могу исправить эту ошибку?

Answer 1

Вы можете найти тип SelectDisplayProps здесь: https://github.com/mui-org/material-ui/blob/v4.9.12/packages/material-ui/src/Select/Select.d.ts#L115

SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement>;

Вы можете расширить его по мере необходимости (MySelectDisplayProps в приведенном ниже примере):

import * as React from "react";
import "./styles.css";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

interface MySelectDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
  "data-testid"?: string;
}

function MyComponent() {
  const [value, setValue] = React.useState("1");
  return (
    <Select
      value={value}
      onChange={event => setValue(event.target.value as string)}
      SelectDisplayProps={
        { "data-testid": "my-component" } as MySelectDisplayProps
      }
    >
      <MenuItem value="1">One</MenuItem>
      <MenuItem value="2">Two</MenuItem>
      <MenuItem value="3">Three</MenuItem>
    </Select>
  );
}
export default function App() {
  return (
    <div className="App">
      <MyComponent />
    </div>
  );
}