仅 React-Bootstrap 关闭按钮样式不起作用

Question

对于我与 React-Bootstrap 一起使用的所有组件，除了模态、警报等中内置的关闭按钮之外，所有样式都有效。示例如下。

\n

警报组件 - 预期

\n

\n

我看到的警报组件

\n

\n

模态组件 - 预期

\n

\n

我看到的模态组件

\n

\n

我正在使用的构建在 React-Bootstrap 之上的 npm 包也发生了同样的事情，比如React-Bootstrap-Typeahead。

\n

这些是我正在使用的依赖项：

\n

"bootstrap": "^5.0.0-beta1",\n"popper.js": "^1.16.1",\n"react-bootstrap": "^1.4.0",\n"react-bootstrap-typeahead": "^5.1.4"\n

\n

我在我的文件中导入 Bootstrap CSS index.js：

\n

\r\n

\r\n

"bootstrap": "^5.0.0-beta1",\n"popper.js": "^1.16.1",\n"react-bootstrap": "^1.4.0",\n"react-bootstrap-typeahead": "^5.1.4"\n

\r\n

\r\n

\r\n

\n

我像这样在我的文件中导入 React-Bootstrap，除了关闭按钮之外，一切都正常工作。

\n

import { Modal, Button, Alert } from \'react-bootstrap\';\n

\n

不过，我不会在任何地方导入 Popper.js 或 Bootstrap.js。有谁知道可能出了什么问题？

\n

编辑

\n

下面是在 HTML DOM 中呈现的按钮以及正在应用的样式。奇怪的是，按钮上的类没有应用任何样式.close（并且 中也没有应用任何样式bootstrap.min.css）。此外，与按钮视觉效果相关的大多数样式都来自user agent stylesheet

\n

\r\n

\r\n

import \'bootstrap/dist/css/bootstrap.min.css\';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById(\'root\')\n);

\r\n

import { Modal, Button, Alert } from \'react-bootstrap\';\n

\r\n

\r\n

\r\n

\n

Answer 1

之前已经回答过，但我发布了一个独立于版本的解决方案。

问题

react-bootstrap当它与相应的bootstrap版本不匹配时，就会开始表现奇怪。在 OP 的例子中，警报组件上的关闭按钮的样式不正确。

解决方案

我们需要确保两个库的版本匹配。查看文件内部并查看安装了和package.json的版本。bootstrapreact-bootstrap

包.json：

{
  "name": "react-frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    
    "bootstrap": "5.0.2",
    "react-bootstrap": "1.4.3"
    
    // these versions might not match!   
  
  }  
}

要查找您的版本是否匹配，请访问https://react-bootstrap.github.io网站并检查右侧的版本下拉列表：

• react-bootstrap@2以上 -bootstrap@5

• react-bootstrap@1.6.1以上 -bootstrap@4

• react-bootstrap@0.33.1以上 -bootstrap@3

要解决给定示例中的问题，请降级到 bootstrap 版本 4：

npm install --save bootstrap@4或者yarn add bootstrap@4

或升级到react-bootstrap 2

npm install --save react-bootstrap@2或者yarn add react-bootstrap@2

就我而言，升级到react-bootstrap不起作用，因为它引入了其他问题，但我成功降级到bootstrap 4。

Answer 2

就我而言，我安装了 "bootstrap": "^5.0.1" 和 "react-bootstrap": "^1.6.0"。我卸载了react-bootstrap，然后升级到“react-bootstrap”：“^2.0.0-alpha.2”，关闭按钮得到了正确的样式。