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。

package.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

要解决给定示例中的问题，请降级到引导版本 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”，关闭按钮得到了正确的样式。

Answer 3

我用这个 CSS 修复了它：

.close ::before{
    content: 'X';
    visibility: visible;
    color: "black";
    font-weight: bold;
}

.sr-only::before{
    visibility: hidden;
}

.close{
    /*background-color: red; */
    visibility: hidden;
    position: absolute;
    right: 32px;
    top: 10px;
    width: 20px;
    height: 20px;
    background-color: rgb(247, 12, 12, 0.5);
}

Answer 4

我安装了"bootstrap": "^5.0.0-beta1"。我需要"bootstrap": "^4.5.3" 和"react-bootstrap": "^1.4.0"。

我使用 npm 卸载了第 5 版引导程序。安装版本 4.5.3。关闭我的终端，重新启动它，然后运行run start。然后，样式按预期工作。

Answer 5

我遇到了这个问题，我解决了这个问题。您需要添加 import 'bootstrap/dist/css/bootstrap.min.css';您无需卸载引导程序 5。