Question

是否可以覆盖成功的默认颜色＆＃39; react-bootstrap中的按钮？

我的代码：#5cb85c

成功按钮的默认设置为#70bf41

我希望按钮的颜色略有不同（Unpermitted parameters: :season_start, :season_end）以匹配我的应用程序的其余部分。

Answer 1

bsClass支持

<Label/>道具。 - ＆GT; doc

因此，您可以传递自定义css类，并使用所需的类样式。

我使用伪代码来表达我的意思。

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

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

Answer 2

到目前为止，我是通过将the CDN中btn-success的样式复制到我的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>添加了新样式，以避免在控制台输出中出现讨厌的字眼。

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

It works for me™，但YMMV。

如何覆盖react-bootstrap按钮（bsStyle）的颜色？

2 个答案: