Обертка пользовательского интерфейса материала - повторное использование типов машинописных текстов для заданной опоры

Question

Во-первых, извините, если на этот вопрос ответили раньше, я не смог его найти.

По некоторым причинам в приложении, над которым я работаю прямо сейчас, у нас есть оболочка для некоторых компонентов пользовательского интерфейса материала. Например, у меня есть MyCompanyButton, который является оболочкой для компонента Button Material-ui.

Это действительно просто, примерно так:

const MyCompanyButton: React.FC<MyCompanyButtonProps> = (props): React.ReactElement => {
  const { label, color, type } = props;

  return (
    <Button color={color} type={type}>
      {label}
    </Button>
  );
};

Проблема с типами для props.

Моя первая попытка заключалась в том, чтобы определить их как это:

type MyCompanyButtonProps = {
  label: string;
  color: string;
  type: string;
};

Но когда я пытаюсь использовать свой компонент вот так:

<MyCompanyButton color="primary" type="submit" label="Send" />

, я получаю следующая ошибка:

Тип «строка» не может быть назначен типу «по умолчанию» | «наследовать» | «первичный» | «вторичный» | undefined '. TS2769

Я понимаю ошибку, но не знаю, как ее исправить. Я хочу повторно использовать типы пользовательского интерфейса материала, но не могу их найти. Я знаю, что в текущих версиях они встроены в основной пакет, но я не понимаю, как найти "цветной" тип и применить его к моей цветовой опоре.

До сих пор я делал введите определение типа из ошибки и примените его к моей опоре:

цвет: "default" | «наследовать» | «первичный» | «вторичный» | undefined;

Однако я думаю, что это не способ сделать это, потому что, если тип в библиотеке изменится, мне нужно будет изменить его и здесь.

Надеюсь, кто-то может мне помочь.

Спасибо!

Answer 1

Поскольку вы делаете это для расширения компонента Button, поскольку label не является частью свойств кнопки MUI, вы можете расширить определение типа MyCompanyButtonProps с помощью типа MUI ButtonProps следующим образом:

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

interface MyCompanyButtonProps extends ButtonProps {
  label: string;
}

export const MyCompanyButton: React.FC<MyCompanyButtonProps> = (props): React.ReactElement => {
  const { label, color, type } = props;

  return (
    <Button color={color} type={type}>
      {label}
    </Button>
  );
};

Как правило, с библиотекой Material UI свойства компонента могут быть импортированы из того же места, что и компонент, с Props после имени компонента.