如何在react-bootstrap中更改按钮的颜色？

Question

我知道在react-bootstrap中更改颜色非常困难，但我想让我的按钮具有不是主要颜色的颜色。我该如何在JS/SCSS中实现此目的？

- qazwsxedcrfvtgbyhn

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>

想要给react-bootstrap中的<Button />组件添加特定的样式，只需使用bsClass属性即可。

引用自官方文档

- inaumov17

Answer 2

试试这个：

https://react-bootstrap.github.io/getting-started/theming/

对于按钮，您可以在Button组件中添加variant='custom'属性，并在css文件中像这样自定义您的按钮：

.btn-custom {
    ...
}

- Deep Parekh

Answer 3

在紧急情况下，我能够使用内联样式为 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;

- Imriven

Answer 4

只需在CSS文件中添加CSS，或者如果您正在使用PCSS，则按照以下方式进行CSS编写。

.btn-primary {
    color: #fff;
    background-color: #2E4C80;
    background-color: cutom-color;
    border-color: #2E4C80;
    border-color: cutom-cor;
}

它将自动覆盖默认设置

- Rai Hafeez

Answer 5

使用 !important 进行覆盖：

App.css

.button {
  background-color: #370344 !important;
}

组件

<Button className="button">Submit</Button>

- user10527612

---

我会称之为反模式。 - mkupiniak

Answer 6

你可以使用来自react-bootstrap的“主题和自定义样式”https://react-bootstrap.github.io/getting-started/theming/教程，我遇到了相同的问题，它很有帮助。

- Oluwagbemi Kadri

---

仅提供链接的答案在SO上并不被认为是有价值的。请参见[答案]。 - isherwood

这个链接已经失效 - Barry Chapman

Answer 7

对于那些想要在react-bootstrap中更改活动/点击按钮颜色的人，您必须覆盖按钮的默认scss调用。因此，例如，如果您想要在活动/点击时更改所有主要按钮的颜色，它将看起来像这样：

index.css

.btn-primary:active {
  --bs-btn-active-bg:#ff79c6;
  --bs-btn-active-border-color: #ff79c6;
  --bs-btn-active-color: #44475a;
}

- T3nt4c135

Answer 8

我终于弄明白了——如果你使用SCSS，这里有一个修改按钮和（我假设它是一个链接）文本的解决方案。正如其他人在上面提到的，每行样式都必须包含'!important'规则非常重要。虽然我在网上找到的几乎所有示例都将自定义按钮类命名为'custom-btn'，但实际上你可以随便命名。

下面的示例创建了一个带有自定义黄色背景颜色、自定义边距和边框规格以及白色字体颜色的Bootstrap按钮，其中包含了按钮内部的链接。

JSX

<Button className="any-class-name-you-want">
    <a href="your-link">your-text</a>
</Button

SCSS

.any-class-name-you-want {
  background-color: #fcb426 !important;
  margin: 10px 50px !important;
  border: 1px solid #fff !important;

  a {
    color: white !important; 
  }
}

- nathan liang

Answer 9

你可以使用React的条件属性进行操作

<button
  className={
    selectedOffer?._id == offer._id
      ? "btn btn-danger rounded-0 mx-1"
      : "btn btn-outline-danger rounded-0 mx-1 bg-white"
  }
  style={
    selectedOffer?._id == offer._id
      ? { backgroundColor: "#FA0105" }
      : { borderColor: "#FA0105" }
  }
  onClick={() => setSelectedOffer(offer)}
>
  {offer.slug}
</button>

- Naga