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

Question

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

警报组件 - 预期

我看到的警报组件

模态组件 - 预期

我看到的模态组件

我正在使用的构建在 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 class 没有应用任何样式（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

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

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

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

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

Answer 5

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

问题

当

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

要解决给定示例中的问题，要么降级到 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.

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

React-Bootstrap ONLY Close Button Styling Not Working

javascript

reactjs

react-bootstrap

bootstrap-4

编辑

问题

解决方案

package.json: