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

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

警报组件 - 预期

我看到的警报组件

模态组件 - 预期

我看到的模态组件

我正在使用的构建在 React-Bootstrap 之上的 npm 包也发生了同样的事情，比如React-Bootstrap-Typeahead https://www.npmjs.com/package/react-bootstrap-typeahead.

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

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

我将 Bootstrap CSS 导入到我的index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

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

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

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

Edits

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

/* From user agent stylesheet */
button {
    appearance: button;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
    box-sizing: border-box;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
}
/* The appearance, text-transform, cursor, and margin properties
are being over-riden by _reboot.scss below */

/* From bootstrap/scss/_reboot.scss */
[type=button]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

/* This style is being over-riden*/
[type=button], button {
    -webkit-appearance: button;
}

button {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-transform: none
    border-radius: 0;
}

<button type="button" class="close">
  <span aria-hidden="true">×</span>
  <span class="sr-only">Close alert</span>
</button>

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

问题

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

解决方案

我们需要确保两个库的版本匹配。看看你的内心package.json文件并查看是什么版本bootstrap and react-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 https://react-bootstrap.github.io网站并检查右侧下拉的版本：

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

• [email protected] /cdn-cgi/l/email-protection以上 -bootstrap@4

• [email protected] /cdn-cgi/l/email-protection以上 -bootstrap@3

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

npm install --save bootstrap@4 or yarn add bootstrap@4

or升级到react-bootstrap 2

npm install --save react-bootstrap@2 or yarn add react-bootstrap@2

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