How to read style from scss react

I just copy this style code from Bootstrap class and paste it on my scss class to customize some colors and borders :

.nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

and this is the code to use my style:

<section id="tabs">
    <div className="container">
        <h6 className="section-title h1">Tabs</h6>
        <div className="row">
            <div className="col-xs-12 ">
                <nav>
                    <div className={styles["nav nav-tabs nav-fill"]} id="nav-tab" role="tablist">
                    <a className="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
                    <a className="nav-item nav-link" id="nav-about-tab" data-toggle="tab" href="#nav-about" role="tab" aria-controls="nav-about" aria-selected="false">About</a>
                    </div>
                </nav>
                <div className="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
                    <div className="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> 1</div>
                    <div className="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">2 </div>
                </div>
            </div>
        </div>
    </div>
</section>

But I cant read .nav and nav-tabs and nav-fill from my style.

Here is not work : <div className={styles["nav nav-tabs nav-fill"]} id="nav-tab" role="tablist">

but here is work : <div className="nav nav-tabs nav-fill" id="nav-tab" role="tablist"> because it is read from Bootstrap class