fixed select component

src/components/Select/Select.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import Select from 'react-select';
-import style from './Select.module.scss';
+import style from './Select.module.css';
 
 const options = [
   { value: 'Ruby on Rails', label: 'Ruby on Rails' },
@@ -35,7 +35,7 @@ const TagSelect = () => {
         <div className="container">
           <div className="row">
             <div className="col-12">
-              <h2>Найти специалиста по навыкам</h2>
+              <h2 className={style.search__title}>Найти специалиста по навыкам</h2>
               <div className={style.search__box}>
                 <Select
                   value={items}

src/components/Select/Select.module.css

@@ -1,6 +1,7 @@
 .search {
   margin-top: 40px;
-  & h2 {
+}
+  .search__title {
     font-family: 'GT Eesti Pro Display';
     font-size: 2.4em;
     font-weight: 700;
@@ -11,12 +12,12 @@
     margin-bottom: 40px;
   }
 
-  &__box {
+  .search__box {
     display: flex;
     justify-content: space-between;
   }
 
-  & button {
+  .search__box > button {
     width: 131px;
     height: 40px;
     border-radius: 10px;
@@ -29,26 +30,26 @@
     letter-spacing: normal;
     text-align: center;
   }
-}
+
 
 .select {
   width: 85%;
-
-  [class$='-placeholder'] {
-    display: none;
-  }
-
-  [class$='-control'] {
-    border-color: #e8e8e8 !important;
-    box-shadow: 0 0 0 1px #e8e8e8;
-  }
-
-  [class$='-value'] {
-    font-size: 1.6em;
-  }
-
-  [class$='-option'] {
-    font-size: 1.6em;
-    color: gray;
-  }
+}
+
+[class$='-placeholder'] {
+  display: none;
+}
+
+[class$='-control'] {
+  border-color: #e8e8e8 !important;
+  box-shadow: 0 0 0 1px #e8e8e8 !important;
+}
+
+[class$='-value__label'] {
+  font-size: 1.4em !important;
+}
+
+[class$='-option'] {
+  font-size: 1.6em !important;
+  color: gray !important;
 }