Bootstrap 无法与 React 一起使用

Question

我正在尝试将 Bootstrap 属性应用于我的<span>和<button>. 我不确定我做错了什么。我在 stackoverflow 中搜索了这个问题，但所有建议都说将类更改为 className。我已经做到了这一点，但我仍然看不到我的风格发生变化。

索引.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();

计数器.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"and "bg-secondary"etc ，因此请尝试className="badge bg-primary m-2".

Answer 2

假设您已经安装了 Bootstrap，然后将此import语句添加到您的代码中：

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