web-dev-qa-db-fra.com

Comment changer les couleurs d'un bouton dans react-bootstrap?

Je sais que changer de couleur est très difficile dans react-bootstrap, mais j'aimerais avoir mon bouton avec une couleur qui n'est pas une couleur primaire. Comment puis-je faire cela dans JS/SCSS?

javascriptcssreactjsbootstrap-4react-bootstrap
7
qazwsxedcrfvtgbyhn
const App = () => (
  <div className="content">
    <ReactBootstrap.Button bsStyle="primary">Default Button</ReactBootstrap.Button>
    <ReactBootstrap.Button bsClass="custom-btn">Custom Button</ReactBootstrap.Button>
  </div>
);

ReactDOM.render(
  <App />,
  document.getElementById("react")
);
.content {
  padding: 10px;
}

.custom-btn {
  background: #fff;
  color: red;
  border: 2px solid red;
  border-radius: 3px;
  padding: 5px 10px;
  text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>


<div id="react"></div>

Pour ajouter le style spécifique à react-bootstrap<Button /> composant, utilisez simplement la propriété bsClass

Tiré de les documents officiels

3
inaumov17

Vous pouvez utiliser ce didacticiel " Thème et personnalisation des styles " https://react-bootstrap.github.io/getting-started/theming / de react-bootstrap, j'ai eu le même problème et c'était utile

0
T.M