Override bootstrap css only in one react component - css

Question

so I'm using a gorgeous search bar component that I found on codepen in my react (CRA) project.
I have imported css in the default src/index.js
Then I have my search component which is composed of Search.js and Search.module.css.
Clearly Bootstrap styling and the Search component styling doesn't work together, when I comment the bootstrap file import in src/index.js, the Search component will be working fine.
So how can I override bootstrap only on my Search Component?
Here is the css of the Search.module.css
#import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
* {
font-family: Roboto, sans-serif;
padding: 0;
margin: 0;
}
.flexbox {
background: linear-gradient(155deg, #cccccc, #e8ecee, #d4d4d4);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.search {
margin: 20px;
}
.search>h3 {
font-weight: normal;
}
.search>h1,
.search>h3 {
color: white;
margin-bottom: 15px;
text-shadow: 0 1px #eaeff1;
}
.search>div {
display: inline-block;
position: relative;
}
.search>div:after {
content: "";
background: white;
width: 4px;
height: 20px;
position: absolute;
top: 40px;
right: 2px;
transform: rotate(135deg);
box-shadow: 1px 0 #eaeff1;
}
.search>div>input {
color: white;
font-size: 16px;
background: transparent;
width: 25px;
height: 25px;
padding: 10px;
border: solid 3px white;
outline: none;
border-radius: 35px;
box-shadow: 0 1px #eaeff1;
transition: width 0.5s;
}
.search>div>input::placeholder {
color: #5a5a5a;
opacity: 1;
}
.search>div>input::-ms-placeholder {
color: #efefef;
}
.search>div>input::-ms-input-placeholder {
color: #5a5a5a;
}
.search>div>input:focus,
.search>div>input:valid {
width: 250px;
}

Answer 1

As you haven't shared the code snippets. I am assuming the bootstrap search will be using: text and button tag. Now, the CSS of this would be coming from bootstrap.
You can do the following:
1) Make a search component level class eg "search-module"
2) Now, create css or scss file import in the search component and within that css
override the bootstrap css by :
.search-module input[type=search] {...}
OR
3) you can do this overriding on your main style.css file too.
You need do to step 2 for all the other conflicting classes, tags, and IDs in the bootstrap with the search component.
PS: This will bloat your CSS. Best would be if you can just pick that part of Bootstrap which is required and rest you write your own style.
Thank you.