How to override react-bootstrap colors?

Question

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

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>

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

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

I am using Button from react-bootstrap

import {Button} from "react-bootstrap";

Styles from bootstrap

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

Using versions as below:

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

Jibin Joseph · Accepted Answer · 2019-03-21 11:20:00Z

2

Styles applied using the style="" attribute of HTML elements are more specific than styles applied through classes, which is why your first solution worked. Appending !important at the end of styles is one way of overriding other styles which are more specific than .custom-button class.

One quick solution that comes to my mind, that will ensure that you don't repeat yourself, is storing the styles in an object and importing them from a file.

styles.js

const styles = {
    customButton: {
        backgroundColor: '#0B0C10',
        borderColor: '#45A293',
        color: '#45A293',
        borderRadius: '100px'
    }
};

export default styles;

Component.jsx

import { styles }  from './styles.js'

<Button
   block
   style={styles.customButton}
>
   sample text
</Button>

Otherwise you would have to play with attaching ID's or construct more specific css selectors.

answered Mar 21, 2019 at 11:20

Jibin Joseph

1,3158 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

miyav miyav Over a year ago

Since i wanted to change every button to look like it i worked it around with #root Button { styles here } style.

Jibin Joseph Over a year ago

@miyavmiyav consider accepting or up voting the answer if it led to a solution.

miyav miyav Over a year ago

It didnt tho so won't do that.

Jibin Joseph Over a year ago

So are you implying the above solution is not a working solution? Or the advice given at the end that nudges you to use CSS ID selector (since it's more specific) is different from what you ended up doing?

miyav miyav Over a year ago

The advice at the end i read on each and every css question i searched still didnt provide an example on how to use it, and i ended up with solution that changes every Button inside Root id which is every button in my react application. Also its not about what works or not like your first solution. I'd still have to write it with each component and each button inside of it so that is still not a solution that satisfies me.

|

marc_s · Accepted Answer · 2021-02-03 21:25:33Z

2

Add a bg or btn

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

Got mine working like that

Then in the bg="custom-button"

edited Feb 3, 2021 at 21:25

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Aug 8, 2020 at 18:42

Kampouse

275 bronze badges

2 Comments

Kampouse Over a year ago

i was providing the solution that i was searching for in here ;c

Steve Over a year ago

I don't understand the last line: Then in the bg="custom-button"

tim · Accepted Answer · 2019-08-23 00:54:19Z

I am unsure if this effect is intended or not but the easiest way that I have found to override React Bootstrap css is to use Material ui withStyles. Here is an example.

import React from 'react';

import { withStyles } from '@material-ui/styles';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Button from 'react-bootstrap/Button';

const styles = {
    logoContainer: {
        position: 'fixed',
    },
    rowStyles: {
        marginBottom: '10px',
    },
    button: {
        border: '3px inset #ffc107',
        borderRadius: '50%',
        width: '55px',
        height: '55px',
        fontFamily: 'fangsong',
        fontSize: '1em', 
        fontWeight: '700',
        color: 'white',
        backgroundColor: 'rgb(0,0,0, 0.5)',
    }
}

const Logo = (props) => {     
    const logoStyles = props.classes;
    return (
    <div>
    <Container container='true' className={logoStyles.logoContainer}>
        <ButtonGroup >            
            <Col>
                <Row className={logoStyles.rowStyles}>
                    <Button onClick={{}} className={logoStyles.button}>BS</Button>
                </Row>
            </Col>            
        </ButtonGroup> 
    </Container>
    </div>
);                           
                    }

export default withStyles(styles)(Logo);

Hope this helps...

Arvind B · Accepted Answer · 2020-10-06 10:17:55Z

0

You can use the "bsPrefix" prop which allows to override the underlying component CSS base class name. bsPrefix="custom-button"

answered Oct 6, 2020 at 10:17

Arvind B

91 bronze badge

Collectives™ on Stack Overflow

How to override react-bootstrap colors?

4 Answers 4

7 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related