react-select中的className不适用

Question

我刚开始使用 react-select，当我尝试使用 scss 添加我的样式时，它们不适用，我知道有样式选项，您可以在其中设置选项样式和控件，但我想要一种使用 scss 的更简洁的方法

这是我想要的：

这是我申请 className 后得到的：

有没有一种方法可以禁用预设样式，这样我就可以制作自己的样式，或者我该如何修改它，以便它采用我的真实样式，这是我的 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;
  }
}

如果没有比这个库更好的下拉解决方案，任何帮助都会很棒。提前致谢：D

Answer 1

对于

react-select

组件，您可以像这样修改它的默认样式：

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

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

您可以参考here了解更多详情。