如何在 react-bootstrap 中為按鈕更改 colors？

Question

我知道在 react-bootstrap 中更改 colors 非常困難，但我想讓我的按鈕的顏色不是原色。 我怎樣才能在 JS/SCSS 中做到這一點？

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屬性

取自官方文檔

Answer 2

在緊要關頭，我能夠使用內聯樣式在 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;

Answer 3

嘗試這個：

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

對於按鈕，您可以在 Button 組件和 css 文件中添加 variant='custom' 屬性，您可以像這樣自定義按鈕：

.btn-custom {
    ...
}

Answer 4

您可以使用來自 react-bootstrap 的“主題和自定義樣式”教程https://react-bootstrap.github.io/getting-started/theming/ ，我遇到了同樣的問題，這很有幫助

Answer 5

只需在 Css 文件中添加 CSS 或者如果您使用的是 pcss

跟隨CSS

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

它會自動覆蓋默認值

Answer 6

用!important覆蓋：

應用程序.css

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

成分

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

Answer 7

你可以玩反應條件屬性

<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>

Answer 8

我終於弄明白了這一點——如果您使用 SCSS，這里有一個修改按鈕及其包含的文本（我假設它是一個鏈接）的解決方案。 正如其他人在上面提到的，在每一行樣式中包含'!important'規則至關重要。 雖然我在網上遇到的幾乎所有示例都將自定義按鈕命名為 class 'custom-btn' ，但實際上您可以隨意命名。

下面的示例創建了一個 Bootstrap 按鈕，該按鈕具有自定義黃色背景顏色、自定義邊距和邊框規范，以及按鈕內封閉鏈接的白色字體顏色。

建興興業

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