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;
  }
}

我也愿意接受比这个库更好的下拉解决方案。

Answer 1

对于

react-select

组件，您将能够像这样修改它的默认样式：

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

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

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