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 和正在应用的 styles 中呈现的按钮。 Strangely, there are no styles being applied for the .close class on the button (and no styles for this in bootstrap.min.css 8CBA22E28EB17B5F5C6AE2A266AZ ). 此外，大多数与按钮视觉相关的 styles 来自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 。 然后，styles 按预期工作。

Answer 5

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