简单 Bootstrap 按钮在 React 中不显示变体颜色

Question

这是开箱即用的 Create React App 安装，我只做了两件事：

npm install react-bootstrap bootstrap

更改App.js如下：

import logo from './logo.svg';
import './App.css';
import Button from 'react-bootstrap/Button';

function App() {

  function buy() {
    alert('Clicked Buy');
  }
  function sell() {
    alert('Clicked Sell');
  }

  return (
    <div>
      <Button variant='success' onClick={buy}>
        Button1
      </Button>
      <Button variant='danger' onClick={sell}>
        Button2
      </Button>
    </div>

  );
}

export default App;

这些按钮看起来与我将它们从 <button> 更改为 <Button variant=... 之前一样：

Answer 1

将这些行添加到 App.js，根据 https://react-bootstrap.github.io/getting-started/introduction/#stylesheets

import 'bootstrap/dist/css/bootstrap.min.css';
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
  integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
  crossorigin="anonymous"
/>

不需要 link 语句。

添加css后的结果：

Answer 2

您必须导入 css 按钮才能工作

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

Answer 3

您需要将其转换为 ES6 class 定义：

import 'bootstrap/dist/css/bootstrap.min.css';
import logo from './logo.svg';

import './App.css';
class App extends React.Component {
  constructor(props) {
    super(props);


    // This binding is necessary to make `this` work in the callback
    this.buy = this.buy.bind(this);
    this.sell= this.sell.bind(this);
  }

    function buy() {
    alert('Clicked Buy');
  }
  function sell() {
    alert('Clicked Sell');
  }


  return (
    <div>
      <Button variant='success' onClick={buy}>
        Button1
      </Button>
      <Button variant='danger' onClick={sell}>
        Button2
      </Button>
    </div>

  );
}

App()

Answer 4

按照这些说明进行操作

https://create-react-app.dev/docs/adding-bootstrap/

您需要在 package.json 文件中添加依赖项（这是 yarn add react-bootstrap bootstrap 会做的）。

然后yarn，安装bootstrap-react节点模块。

然后您需要导入 bootstrap.css 文件。将该导入行添加到 index.js 文件的顶部。

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

你可以在 devtools 中检查 html 时看到它已导入。

Answer 5

而不是 npm install react-bootstrap ，我做了 npm install react-bootstrap bootstrap 正如它在文档中所说的那样。

你的代码是正确的，但你还应该添加

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

在App.js

简单 Bootstrap 按钮在 React 中不显示变体颜色

Simple Bootstrap buttons not showing variant colors in React

reactjs

react-bootstrap