Как вы используете React- bootstrap с Typescript? - PullRequest
Новая
       13

Как вы используете React- bootstrap с Typescript?

1 голос
/ 31 марта 2020

Я начал использовать Typescript в своем проекте рядом с React- Bootstrap и следующим фрагментом кода: 

 const renderSearchAddressButton = (): JSX.Element => {
    return (
      <div className="search-address-button">
        <Button variant="myownvariant" onClick={onClickSearchAddressButton}>
          {t('search-address-button')}
        </Button>
      </div>
    );
  };

Дает мне ошибку Lint, потому что myownvariant не является правильным вариантом. Код работает, но допускаются только следующие типы вариантов: 

variant?:
    | 'primary'
    | 'secondary'
    | 'success'
    | 'danger'
    | 'warning'
    | 'info'
    | 'dark'
    | 'light'
    | 'link'
    | 'outline-primary'
    | 'outline-secondary'
    | 'outline-success'
    | 'outline-danger'
    | 'outline-warning'
    | 'outline-info'
    | 'outline-dark'
    | 'outline-light';

Эти типы происходят от @ types / реагировать bootstrap, но они не соответствуют официальному реагированию bootstrap поскольку они не оставляют места для вашего собственного варианта.

Поэтому возникает вопрос, как я могу избавиться от этой ошибки? Есть ли другой пакет с лучшими типами? Я думал о модификации типов самостоятельно, но каждый раз, когда я обновляю свои библиотеки, я думаю, что он будет перезаписан.

Заранее спасибо и всего наилучшего.

1 Ответ

0 голосов
/ 31 марта 2020
Параметр

React Bootstrap Button variant поддерживает только указанные значения. Пользовательские значения, такие как myownvariant, не допускаются. Таким образом, ввод @types/react-bootstrap правильный.

Вы можете использовать параметр bsPrefix для перезаписи существующих стилей. 

<Button bsPrefix="myownvariant">Text<Button/>

Исходный код кнопки

...