Javascript 如何在react引导中更改按钮的颜色？

我知道在react引导中更改颜色非常困难，但我希望按钮的颜色不是原色。在JS/SCSS中如何执行此操作？

const-App=（）=>(
默认按钮
自定义按钮
);
ReactDOM.render(
,
document.getElementById（“react”）
);
.content{
填充：10px；
}
.定制btn{
背景：#fff；
颜色：红色；
边框：2倍纯红；
边界半径：3px；
填充物：5px10px；
文本转换：大写；
}
您可以使用react bootstrap中的“主题化和自定义样式””教程，我也有同样的问题，它很有帮助
只要在CSS文件中添加CSS，或者如果您使用的是pcss

跟随css

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

它将自动覆盖默认设置
在紧急情况下，我能够使用内联样式对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;

从“React”导入React；
从“reactstrap”导入{Button}；
常量页面按钮=（道具）=>{
返回(
{！props.data.previous？null:previous}
{！props.data.next？null:next}
);
}
导出默认页面按钮；
试试这个：


具体来说，对于按钮，您可以在按钮组件和css文件中添加variant='custom'属性，您可以如下自定义按钮：

.btn自定义{
...
}
用
覆盖！重要信息
：

App.css

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

组成部分

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

提交