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

Question

对于我与 React-Bootstrap 一起使用的所有组件，所有样式都可以正常工作，除了内置在 Modals、Alerts 等中的关闭按钮。下面的示例。
警报组件 - 预期

我看到的警报组件

模态组件 - 预期

我看到的模态组件

同样的事情发生在我正在使用的构建在 React-Bootstrap 之上的 npm 包上，比如 React-Bootstrap-Typeahead .
这些是我正在使用的依赖项:

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

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

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。有谁知道可能出了什么问题？
编辑
下面是在 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>

Answer 1

之前已经回答过，但我发布了一个独立于版本的解决方案。
问题react-bootstrap当它与它对应的 bootstrap 不匹配时开始出现奇怪的行为版本。在 OP 的情况下，Alert 组件上的关闭按钮的样式不正确。
解决方案
我们需要确保两个库的版本匹配。看看你的package.json文件并查看 bootstrap 的版本和 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网站并检查右侧的版本下拉列表:

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 2npm install --save react-bootstrap@2或 yarn add react-bootstrap@2在我的情况下，升级到 react-bootstrap 并没有奏效，因为它引入了其他问题，但我成功降级到了 bootstrap 4。