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.
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.
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>
.label class, which would remove the regular label styles. If you need to extend the Label styles with a custom color, the className prop is passed through to the span element.