I was trying to use the react-bootstraps accordion component, but I realized that the import import "bootstrap/dist/css/bootstrap.min.css"; is required in order for accordion to work. Upon adding this import all of my custom css was overridden by bootstrap. Is there anyway to have my css override the bootstrap css? I use <link href="%PUBLIC_URL%/css/style.css" rel="stylesheet"/> in my index.html to link my style sheets.
asked Sep 17, 2021 at 15:16
-
I don't think to react bootstrap needs to have CSS imported manually. it will work without import too. Can you add a sandbox demo ?– Nidhi DadiyaCommented Sep 17, 2021 at 15:22
Add a comment
|
1 Answer
Your jsx code should be written like this where the link tag to your custom stylesheet should be placed below the bootstrap cdn because in JavaScript code will be compiled from top to bottom so your custom stylesheet will get compiled after the bootstrap cdn.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
then you can give the styles according to the classes like
.alert{
background-color:red !important;
}
This will override your bootstrap default styling.
Extra tip- You should import the bootstrap CDN for CSS in your index.html file and then there will be no need of adding custom stylesheet.
