CODEWITHSUNDEEP
cssreactjs
Kristoffer Tølbøll
Kristoffer Tølbøll

Reputation: 3347

Adding custom styles to bootstrap clases in react.

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

Upvotes: 2

Views: 175

Answers (2)

Beckham_Vinoth
Beckham_Vinoth

Reputation: 721

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>

Upvotes: 1

Sean Kim
Sean Kim

Reputation: 169

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"

Upvotes: 0

Related Questions