Question

我正在尝试将Bootstrap属性应用于我的<span>和<button>。我不确定自己在做什么错。我在stackoverflow中搜索了此问题，但是所有建议都说将class更改为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，然后将此import语句添加到您的代码中：

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

Bootstrap无法与React一起使用

1 个答案: