Bootstrap 无法与 React 一起使用

Question

我正在尝试将 Bootstrap 属性应用到我的

<span>

和

<button>

。我不确定我做错了什么。我在 stackoverflow 中搜索了这个问题，但所有建议都说将类更改为 className。我已经做到了这一点，但我仍然看不到我的风格发生变化。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Counter from './components/counter';

ReactDOM.render(<Counter/>, document.getElementById('root'));
registerServiceWorker();

counter.jsx

import React, { Component } from 'react';

class Counter extends Component {
    state = {
        count: 0
    };
    render() {
        return (
            <div>
                <span className="badge badge-primary m-2">
                    {this.formatCount()}
                </span>
                <button className="btn btn-secondaty btn- 
sm">Increment</button>
            </div>
        );
    }
    formatCount() {
        const { count } = this.state;
        return count === 0 ? 'Zero' : count;
    }
} 

export default Counter;

任何对此问题的见解将不胜感激。

Answer 1

在 bootstrap v5 中，它已更改为

"bg-primary"

和

"bg-secondary"

等，所以请尝试

className="badge bg-primary m-2"

。

Answer 2

假设您已经安装了 Bootstrap，然后将以下

import

语句添加到您的代码中：

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

Answer 3

我遇到了类似的问题。不知怎的，我发现引导程序版本给我带来了麻烦！

所以我卸载当前版本，然后安装特定版本。

npm remove bootstrap

npm install [email protected]

然后在 App.js 文件中导入必要的引导脚本。

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

或

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

Answer 4

请检查bootstrap的版本，徽章类有一些变化。

根据Bootstrap v5.0及以上版本，Badge类使用以下代码。

渲染（）{ 返回 （ {this.formatCount()} 增量 );

Answer 5

npm install react-bootstrap bootstrap

安装此依赖项，所有样式都可以工作

Answer 6

将类名替换为 className="badge bg-primary m-2",

https://getbootstrap.com/docs/5.0/components/badge/