reactjs - Hur använder man React-bootstrap med Typescript?

Jag har börjat använda Typescript i mitt projekt tillsammans med React-Bootstrap och följande kodstycke:

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

Ger mig ett Lint-fel eftersom myownvariant inte är en korrekt variant. Koden fungerar men de enda tillåtna varianttyperna är följande:

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';

De typerna kommer från @types/react-bootstrap, men de verkar inte vara i linje med den officiella react-bootstrap eftersom de inte lämnar något utrymme för din egen variant.

Så frågan är, hur kan jag bli av med det felet? Finns det ett annat paket med bättre typer? Jag tänkte på att ändra typerna själv, men varje gång jag uppdaterar mina bibliotek antar jag att det kommer att skrivas över.

Tack på förhand och vänliga hälsningar.

Svar #1

React Bootstraps knapp variant-parameter stöder endast de nämnda värdena. Egna värden som myownvariant är inte tillåtna. Så typen i @types/react-bootstrap är korrekt.

Du kan använda bsPrefix-parametern för att skriva över befintliga stilar.

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

Knappens källkod