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。