How to change colors for a button in react-bootstrap?

Question

I know that changing colors is very difficult in react-bootstrap, but I would like to have my button with a color that isn't a primary color. How can I do this in JS/SCSS?

Answer 1

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

Answer 2

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;

Answer 3

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 {
    ...
}