React-Bootstrap仅关闭按钮样式不起作用
Madhav Malhotra
对于我与React-Bootstrap一起使用的所有组件，除内置于Modals，Alerts等中的关闭按钮外，所有样式均适用。
警报组件-预期
我看到的警报组件
模态分量-预期
我看到的模态组件
我正在使用的npm软件包也发生了同样的事情，这些软件包构建在React-Bootstrap之上，例如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> Madhav Malhotra
我已经"bootstrap": "^5.0.0-beta1"安装好了。我需要"bootstrap": "^4.5.3"用"react-bootstrap": "^1.4.0"。
我使用npm卸载了bootstrap的版本5。安装版本4.5.3。关闭我的终端，再次重新启动，然后运行run start。然后，样式按预期工作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
使用React-Toolbox的按钮进行样式设置不起作用
- 2
Bootstrap React的bsStyle不起作用
- 3
Bootstrap Dropdown在React中不起作用
- 4
React Native：NavigationOptions中的标题样式不起作用
- 5
React Material UI TextField FormHelperTextProps样式不起作用
- 6
React Material UI TextField样式不起作用
- 7
下拉样式在React类中不起作用
- 8
视图样式在 React Native 中不起作用
- 9
Twitter Bootstrap关闭按钮不起作用
- 10
Bootstrap断点在React Bootstrap中不起作用
- 11
React Js-在组件上设置innerHTML样式-不起作用-父样式覆盖子样式
- 12
React.js：为什么删除按钮不起作用？
- 13
使用React中的功能组件按钮不起作用
- 14
单选按钮已检查在React中不起作用
- 15
React.js - 添加按钮不起作用
- 16
React bootstrap 导航栏折叠不起作用
- 17
React js CSS内联样式边距权利不起作用
- 18
样式 React Bootstrap 下拉按钮 div
- 19
UWP：设置窗口按钮的样式在关闭按钮上不起作用
- 20
React Native中的Flex框不起作用按钮不会显示
- 21
React网站按钮和输入在智能手机上不起作用
- 22
用按钮增加表单的输入值（React Forms）不起作用
- 23
在 React 中的音频标签中单击按钮时启动声音不起作用
- 24
setState在React的setInterval内部不起作用
- 25
React Jest示例不起作用
- 26
react-redux-router不起作用
- 27
React-Redux连接不起作用
- 28
参数不起作用的React Router
- 29
使用React 0.59但挂钩不起作用
我来说两句