Adding custom styles to bootstrap clases in react.

Question

I have an react component, with two buttons:

import React from 'react'
import './BuildControl.css'
import { Button } from 'react-bootstrap';


const buildControl = (props) => (
    <div className="BuildControl">
           <div className="Label"> {props.label}</div>
            <Button bsStyle="warning" >Less</Button>
            <Button bsStyle="custom">More</Button>
    </div>
);

export default buildControl;

I used the warning button, for the one class, and custom for the other.

Then I added some styling for my custom button

.btn-custom {
background-color: #99703F;
color: white;
}

.btn-custom:hover {
    background-color:  rgba(100, 63, 15, 0.637);
    color: white;
}
.btn-custom:active{
    background-color:  rgba(61, 37, 6, 0.637);
    color: white;
    border: 1.5px solid rgb(228, 206, 204);
}

this works fine, but now my problem is that I want to add the border to the button with the bsStyle="warning" as well, how can I do this?

I know I could just make a style component inside my component and add that, but I don't think it would be a best practice, since I'm already importing CSS from an external file, on the other button? How can I solve this the best way possible

Beckham_Vinoth · Accepted Answer · 2018-11-09 17:02:15Z

1

Create one more className and add it next to ur current className ,

.cstm-border {
  border: red !important;
}

//dont forgot to add important to that

and then add it next to ur className ,

<Button bsStyle="warning cstm-border" >Less</Button>

answered Nov 9, 2018 at 17:02

Beckham_Vinoth

7213 gold badges14 silver badges40 bronze badges

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

Comments

Sean Kim · Accepted Answer · 2018-11-09 16:27:09Z

0

if you made the your app by "create-react-app", you can find the "public" directory.

into the public directory have the index.html

you can add the bootstrap link on the "index.html"

answered Nov 9, 2018 at 16:27

Sean Kim

1691 gold badge2 silver badges10 bronze badges

2 Comments

Kristoffer Tølbøll Over a year ago

Thank you for your answer. I have done this, but it does, unfortunately, does not solve the problem, since all HTML is rendered inside react.

Sean Kim Over a year ago

Aww that's great haha. if my answer helpful to you, vote me please~!

Collectives™ on Stack Overflow

Adding custom styles to bootstrap clases in react.

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related