How to change colors for a button in react-bootstrap?
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>To add the specific styling to react-bootstrap <Button /> component, simply use bsClass property
Taken from the official docs
In a pinch, I was able to use inline-style for some simple styling of buttons in ReactStrap.
import React from 'react';import { Button } from 'reactstrap';const PageButtons = (props) => {return ( <div> {!props.data.previous ? null : <Button style={{color:"#00005c", margin: "5%", boxShadow: "5px 5px 3px rgba(46, 46, 46, 0.62)"}} outline onClick={props.handlePrevious}>Previous</Button>} {!props.data.next ? null : <Button style={{ color:"#00005c", margin: "5%", boxShadow: "5px 5px 3px rgba(46, 46, 46, 0.62)"}} outline onClick={props.handleNext}>Next</Button>} </div> ); } export default PageButtons;
Try this:
https://react-bootstrap.github.io/getting-started/theming/
for buttons specifically, you can add variant='custom' attribute in Button component and in css file, you can customize your button like this:
.btn-custom { ...}