Расширение компонента многоязыкового интерфейса пользователя приводит к ошибке TS об отсутствии свойства "css" - PullRequest
Новая
       60

Расширение компонента многоязыкового интерфейса пользователя приводит к ошибке TS об отсутствии свойства "css"

0 голосов
/ 30 апреля 2020

Мы расширили компонент SnackbarContent нашим собственным (MySnackbarContent): 

export interface MySnackbarContentProps extends Omit<SnackbarContentProps, 'variant'> {
  variant?: MyCustomVariant;
  type?: MyCustomType;
  banner?: boolean;
  // ...
}

const MySnackbarContent = forwardRef<HTMLElement, MySnackbarContentProps>(props: MySnackbarContentProps, ref) => {
  const { variant = 'normal', type = 'default', banner = false, ...other } = props;
  const className = ...;

  return <SnackbarContent ref={ref} className={className} {...other} />
}

Вот ошибка, которую я получаю, когда использую пользовательский компонент SnackbarContent:

Свойство 'css' отсутствует в типе '{type: "error" | "по умолчанию" | "успех" | не определен; сообщение: строка; действие: элемент; } 'но требуется в типе' Pick '.

Я не понимаю, почему свойство css является проблемой здесь, потому что мы не используем эмоцию или стиль-компонент (мы используем JSS).

Как ни странно, все типы корректно проверяются при удалении forwardRef.

Возможный способ решить эту проблему - добавить свойство css в MySnackbarContentProps и задать для него что-то вроде : css?: null. По какой-то причине свойство css является обязательным. Не уверен на 100%, почему это так. Чего мне здесь не хватает?

  • Версия MUI: 4.9.10
  • Версия TS: 3.6.2
  • Реакция: 16.13.0
  • Тип реакции: 16.9.34
...