你如何在 Typescript 中使用 React-bootstrap？

Question

我已經開始在 React-Bootstrap 旁邊的項目中使用 Typescript 和以下代碼：

 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/react-bootstrap，但它們似乎與官方 react-bootstrap 不一致，因為它們沒有為您自己的變體留出任何空間。

因此，問題是，我怎樣才能擺脫那個錯誤？ 有沒有其他更好類型的包？ 我想過自己修改類型，但每次更新我的庫時，我想它都會被覆蓋。

預先感謝您並問候。

Answer 1

React Bootstrap 的 Button variant參數僅支持提到的值。 不允許使用像myownvariant這樣的自定義值。 所以@types/react-bootstrap是正確的。

您可以使用bsPrefix參數覆蓋現有樣式。

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

按鈕源代碼