如何覆盖react-bootstrap颜色? [英] How to override react-bootstrap colors?

问题描述

我一直在寻找如何更改它的方法，但是似乎没有一种解决方案适合我.

I was looking up how to change it but none of the solutions seemed to work for me.

我想覆盖react-bootstrap按钮的颜色.

I want to override the color of a react-bootstrap button.

以下这种解决方案可以正常工作，而这正是我想要做的事情:

This solution as below works just fine and is exactly what i wanna do:

<Button
   block
   style={{backgroundColor: '#0B0C10', borderColor: '#45A293', color: '#45A293', borderRadius: '100px'}}
>
   sample text
</Button>

但是我不想每次使用按钮时都重写它，所以我想使用CSS解决方案，我已经尝试过使用它:

But i don't wanna rewrite it each time i use button so i would like to have solution with css, I've tried using this:

.custom-button {
    background-color: #1F2833;
    border-color: #45A293;
    border: 3px solid-transparent;
    color: #45A293;
    border-radius: 100px;
}

然后像className ="custom-button"这样在className中传递它，但实际上并没有用.

And then passing it in className like like so className="custom-button" but it doesn't really work.

我正在使用react-bootstrap中的Button

I am using Button from react-bootstrap

import {Button} from "react-bootstrap";

引导程序中的样式

import 'bootstrap/dist/css/bootstrap.min.css';

使用以下版本:

"react-bootstrap": "^1.0.0-beta.5",
"bootstrap": "^4.3.1",

推荐答案

添加bg或btn

.bg-custom-button {
    background-color: #1F2833;
    border-color: #45A293;
    border: 3px solid-transparent;
    color: #45A293;
    border-radius: 100px;
}

像那样工作的我的矿​​

Got mine working like that

然后在 bg ="custom-button"

这篇关于如何覆盖react-bootstrap颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！