React Select Style with CSS

select.js

<Select
    classNamePrefix="gkits"
    value={{
      value: (value || '').replace(/\s+/g, '-'),
      label: value,
    }}
    onChange={onFontChange}
    options={fonts}
    unstyled={true}
    isSearchable={true}
    isClearable={false}
  />

style.scss

.gkits {
	&__control {
		height: 32px;
		min-height: auto !important;
		box-shadow: none;
		border: 1px solid #e5e5e5;
		border-radius: 3px;
		padding: 0 8px;
	}
	&__value-container {
		height: 32px;
		min-height: auto !important;
	}
	&__single-value {
		&:focus {
			border: none;
			outline: none;
		}
	}
	&__option {
		height: 32px;
		min-height: auto !important;
		padding: 2px 8px;
		background: #fff;
		padding: 0.5rem 1rem;
		&--is-focused {
			background-color: #e5e5e5;
		}
	}
	&__input-container {
		position: relative;
		height: 30px;
	}
	&__input {
		cursor: pointer;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: none;
		outline: none;
		background: none;
		border-radius: 0;
		&:focus {
			box-shadow: none !important;
			outline: none !important;
		}
	}
	&__indicators {
		height: 30px;
		min-height: auto !important;
	}
	&__indicator {
		padding-left: 8px;
		cursor: pointer;
	}
	&__indicator-separator {
		background: #e5e5e5;
	}
	&__menu {
		border-radius: 3px;
		box-shadow: 0 0 0 1px #e5e5e5;
		margin-top: 3px;
		background: #fff;
	}
}