仅 React-Bootstrap 关闭按钮样式不起作用 [英] React-Bootstrap ONLY Close Button Styling Not Working

问题描述

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

For ALL the components I'm using with React-Bootstrap, all the styling is working EXCEPT for close buttons that are built into Modals, Alerts, etc. Examples below.

警报组件 - 预期

我看到的警报组件

模态组件 - 预期

我看到的模态组件

同样的事情发生在我使用的构建在 React-Bootstrap 之上的 npm 包上，比如 React-Bootstrap-Typeahead.

The same thing is happening for npm packages that I'm using that are built on top of React-Bootstrap, like React-Bootstrap-Typeahead.

这些是我正在使用的依赖项:

These are the dependencies I'm using:

"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:

I import Bootstrap CSS in my index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

我像这样在我的文件中导入 React-Bootstrap，除了关闭按钮外，一切正常.

I import React-Bootstrap in my files like this and everything works without a problem EXCEPT the close buttons.

import { Modal, Button, Alert } from 'react-bootstrap';

我没有在任何地方导入 Popper.js 或 Bootstrap.js.有谁知道可能出了什么问题?

I'm not importing Popper.js or Bootstrap.js anywhere though. Does anyone know what could be going wrong?

下面是在 HTML DOM 中呈现的按钮和正在应用的样式.奇怪的是，按钮上的 .close 类没有应用任何样式(bootstrap.min.css 中也没有用于此的样式).此外，与按钮视觉效果相关的大多数样式都来自 用户代理样式表

Underneath is the button being rendered in the HTML DOM and the styles being applied. Strangely, there are no styles being applied for the .close class on the button (and no styles for this in bootstrap.min.css). Also, the majority of the styles related to the button visuals are from the 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>

推荐答案

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

I had "bootstrap": "^5.0.0-beta1" installed. I needed "bootstrap": "^4.5.3" with "react-bootstrap": "^1.4.0".

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

I uninstalled version 5 of bootstrap with npm. Installed version 4.5.3. Closed my terminal, restarted it again, and ran run start. Then, the styles were working as expected.

这篇关于仅 React-Bootstrap 关闭按钮样式不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！