CODEWITHSUNDEEP
cssreactjsreact-bootstrap
miyav miyav
miyav miyav

Reputation: 368

How to override react-bootstrap colors?

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

Upvotes: 2

Views: 13905

Answers (4)

Kampouse
Kampouse

Reputation: 17

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"

Upvotes: 1

Arvind B
Arvind B

Reputation: 9

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

Upvotes: 0

tim
tim

Reputation: 727

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

Upvotes: 0

Jibin Joseph
Jibin Joseph

Reputation: 1315

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.

Upvotes: 2

Related Questions