1
votes

Boutons Bootstrap simples ne montrant pas les variantes de couleurs dans React

Il s'agit d'une installation prête à l'emploi de Create React App, et je n'ai fait que deux choses:

npm install react-bootstrap bootstrap

App.js modifié comme suit:

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;

Les boutons ont la même apparence qu'avant, je les ai modifiés de <button> à <Button variant=... :

reactjs react-bootstrap

3 commentaires

"une installation React prête à l'emploi" - Créer une application React? Avez-vous lu react-bootstrap.github.io/getting-started/... ?

oui - npx create-react-app

J'en ai lu suffisamment pour installer bootstrap, j'ai pensé, je suppose que j'ai besoin de lire le reste.

5 Réponses :

0
votes

Ajoutez ces lignes à App.js, selon 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"
/>

La déclaration de lien n'est pas requise.

Résultats après l'ajout de CSS:

0 commentaires

1
votes

Vous devez importer le css pour que les boutons fonctionnent

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

0 commentaires

0
votes

Vous devez le convertir en une définition de classe ES6:

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()

1 commentaires

Ce n'est absolument pas nécessaire, seule l'importation du CSS fait une différence.

0
votes

Suivez ces instructions

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

Vous devez ajouter les dépendances dans le fichier package.json (c'est ce que fera yarn add react-bootstrap bootstrap ).

Puis yarn , pour installer le module de nœud bootstrap-react.

Ensuite, vous devez importer le fichier bootstrap.css. Ajoutez cette ligne d'importation en haut du fichier index.js.

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

Vous pouvez alors voir qu'il est importé lorsque vous inspectez le html dans devtools.

0 commentaires

0
votes

Au lieu de npm install react-bootstrap, j'ai installé npm bootstrap react-bootstrap comme il est indiqué dans la documentation.

Votre code est correct, mais vous devez également ajouter

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

dans App.js

0 commentaires