你如何将 React-bootstrap 与 Typescript 一起使用？答案

【问题标题】：How do you use React-bootstrap with Typescript?你如何将 React-bootstrap 与 Typescript 一起使用？
【发布时间】：2020-07-11 16:14:41
【问题描述】：

我已经开始在 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 不一致，因为它们没有为您自己的变体留下任何空间。

因此，问题是，我怎样才能摆脱这个错误？还有其他类型更好的包吗？我想过自己修改类型，但每次我更新我的库时，我想它会被覆盖。

提前谢谢你和问候。

【问题讨论】：

标签： reactjs typescript twitter-bootstrap bootstrap-4 react-bootstrap

【解决方案1】：

React Bootstrap 的 Button variant 参数仅支持上述值。不允许使用像 myownvariant 这样的自定义值。所以@types/react-bootstrap的输入是正确的。

您可以使用bsPrefix 参数覆盖现有样式。

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

Button source code

【讨论】：

谢谢尼古拉。我使用了 bsPrefix 而不是变体，但它不起作用。如果我使用 bsPrefix，则 Button 没有我的变体样式。
@JavierGuzman，如果您使用bsPrefix，它将添加您指定的自定义类。对于这个 CSS 类，您可以添加样式。分享代码、CSS 以及它在浏览器中的 HTML 呈现方式。
抱歉耽搁了。最后，最新的 React-bootstrap 包含了类型。它仍然行不通，但我自己重新定义了 Button，因为我不确定 bsPrefix 是否会是干净的前进方式。显然。官方 Github 上有关于如何在类型中允许更多灵活性的讨论。