如何覆蓋react-bootstrap按鈕（bsStyle）的顏色？

Question

是否可以覆蓋react-bootstrap中“成功”按鈕的默認顏色？

我的代碼： <Label bsStyle='success'>{myNumber}</Label>

成功按鈕的默認值為#5cb85c

我希望按鈕是略微不同的綠色（ #70bf41 ）以匹配我的應用程序的其余部分。

Answer 1

bsClass道具受<Label/>支持。 -> 文檔

因此，您可以傳遞自定義的CSS類，並且類樣式使用所需的顏色。

我使用偽代碼來表達我的意思。

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

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

Answer 2

到目前為止，我通過將btn-success的樣式從CDN復制到我的App.css中並將其重命名為btn-optin並進行了更改來實現。

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

在我的組件中，我導入了utils並為<Button>添加了新樣式，以避免在Console輸出中產生討厭的表情。

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

It works for me ™，但It works for me YMMV。