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

Posted 2023-02-22

【中文标题】如何更改 react-bootstrap 中按钮的颜色？

【英文标题】：How to change colors for a button in react-bootstrap?

【发布时间】：2018-11-23 07:48:16

【问题描述】：

我知道在 react-bootstrap 中更改颜色非常困难，但我希望按钮的颜色不是原色。如何在 JS/SCSS 中做到这一点？

【参考方案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 属性

取自the official docs

【参考方案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;

【参考方案3】：

试试这个：

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

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

.btn-custom 
    ...

【参考方案4】：

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

【参考方案5】：

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

跟随css

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

它会自动覆盖默认值

【参考方案6】：

用!important覆盖：

App.css

.button 
  background-color: #370344 !important;

组件

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