CODEWITHSUNDEEP
javascriptreactjsreact-bootstrap
morrime
morrime

Reputation: 493

How to override the color of a react-bootstrap button (bsStyle)?

Is it possible to override the default color for the 'success' button in react-bootstrap?

My code: <Label bsStyle='success'>{myNumber}</Label>

The default for the success button is #5cb85c

I would like the button to be a slightly different green (#70bf41) to match the rest of my application.

Upvotes: 1

Views: 4740

Answers (2)

No Refunds No Returns
No Refunds No Returns

Reputation: 8356

As of this date, I accomplished this by copying the styles for btn-success from the CDN into my App.css and renamed them to btn-optin and made my changes.

.btn-optin {
    color: #fff;
    background-color: #712687;
    border-color: #9409b5;
    text-transform: uppercase;
}

.btn-optin.focus, .btn-optin:focus {
    color: #fff;
    filter:brightness(70%);
}

.btn-optin:hover {
    color: #fff;
    filter:brightness(85%);
}

.btn-optin.active, .btn-optin:active, .open > .dropdown-toggle.btn-optin {
    color: #fff;
    filter:brightness(70%);
}

.btn-optin.active.focus, .btn-optin.active:focus, .btn-optin.active:hover, .btn-optin:active.focus, .btn-optin:active:focus, .btn-optin:active:hover, .open > .dropdown-toggle.btn-optin.focus, .open > .dropdown-toggle.btn-optin:focus, .open > .dropdown-toggle.btn-optin:hover {
    color: #fff;
    filter:brightness(70%);
}

.btn-optin.active, .btn-optin:active, .open > .dropdown-toggle.btn-optin {
    color: #fff;
    background-image: none;
}

.btn-optin.disabled.focus, .btn-optin.disabled:focus, .btn-optin.disabled:hover, .btn-optin[disabled].focus, .btn-optin[disabled]:focus, .btn-optin[disabled]:hover, fieldset[disabled] .btn-optin.focus, fieldset[disabled] .btn-optin:focus, fieldset[disabled] .btn-optin:hover {
    color: #fff;
}

.btn-optin .badge {
    color: #fff;
}

In my component I imported the utils and added my new style for <Button> to avoid a nastygram in the Console output.

import { utils } from 'react-bootstrap';
utils.bootstrapUtils.addStyle(Button, "optin");

It works for me™ but YMMV.

Upvotes: 1

Chen-Tai
Chen-Tai

Reputation: 3473

bsClass props is supported by <Label/>. -> doc

So you can pass a custom css class and the class style use color you want.

I use a pseudo code to present my meaning.

<style>
  .custom-color {
    color: #70bf41;
  }
</style>

// react component
<Label bsClass="custom-color">{myNumber}</Label>

Upvotes: 0

Related Questions