CountryDropdown 看起来类似于默认 Select 样式

Question

背景

如果你看到下图，前两个下拉菜单看起来很相似，但第三个看起来不同。

列表项

在前两个中，我使用了 CountryDropdown 和 RegionDropdown (react-country-region-selector)。但是对于第三个，我使用了 react-select.

问题

CountryDropdown 和 RegionDropdown 的外观与第 3 个 Select 组件不匹配。

预期

CountryDropdown 和 RegionDropdown 应该具有与第 3 个 Select 组件相同的样式（外观）。

请指导我解决这个问题。

<Row>
  <div className="input-group" style={textboxDivStyle}>
    <CountryDropdown style={{ width: "300px" }}
      value={country}
      onChange={(val) => changeCountry(val)} />
  </div>
</Row>
<Row>
  <div className="input-group" style={textboxDivStyle}>
    <RegionDropdown style={{ width: "300px" }}
      country={country}
      value={state}
      onChange={(val) => selectState(val)} />
  </div>
</Row>
<Row>
  <div className="input-group" style={textboxDivStyle}>
    <div style={{ width: "300px" }}>
      <Select menuPlacement="auto" menuPosition="fixed" options={districts} value={district} onChange={changeDistrict} />
    </div>
  </div>
</Row>

Answer 1

这两个库似乎彼此并不兼容。 CountryDropdown 和 RegionDropdown 是一个没有样式的 select 组件，内置数据， Select 是一个完全样式化的 select 组件，不幸的是它不起作用作为我所知道的包装。您在这里有几个选择...最简单的就是直接向 Dropdown 组件添加样式并使其看起来尽可能类似于 Select。否则，寻找不同的库可能是有意义的，或者你可以直接从这个 repo https://github.com/country-regions/country-region-data 获取数据并作为 props 传递给 Select，这可能会让你准确地实现你想要的但也是最耗时的。

CountryDropdown 看起来类似于默认 Select 样式

CountryDropdown look to be made similar to default Select style

html

css

user-interface

html-select

reactjs