The className in react-select doesent apply

I just started using react-select and when I try to add my styles using scss they dont apply, I know that there is option for styles where you set option styles as well as control but I want a cleaner way using scss

Here is what I want:

Here is what I get after applying className:

Is there a way to disable the preset styles so I can make my own or how can I modify it so it takes my real styles here is my css:

.shippingCountryDropdownElement {
  border: none;
  height: 42px;
  background-color: red;
  color: gray;
  outline: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  cursor: pointer;
  &:focus {
    box-shadow: none;
  }
}

And if not is there a better solution for a dropdown than this library, any help would be great. Thanks in advance

For the react-select component, you will be able to modify it's default style like this:

// To Hide Indicator Line
.shippingCountryDropdownElement .select__indicator-separator {
  display: none;
}

// To Hide Border Around Field
.shippingCountryDropdownElement .select__control {
  border: 0px;
}

You can refer here for more details on this.