【问题标题】：styling react-select using classes使用类样式化 react-select
【发布时间】：2020-01-02 16:50:06
【问题描述】：

我在我的代码中使用 react-select。 https://www.npmjs.com/package/react-select

我想使用类名来设置我的下拉菜单的样式，所以我引用了https://react-select.com/styles。 react slect 的 DOM 结构如链接所示。

如何使用 classNames 设置 react-select 样式？

任何人都可以显示示例代码吗？

【问题讨论】：

【解决方案1】：

看看他们的例子：

For example, given className='react-select-container' and classNamePrefix="react-select", the DOM structure is similar to this:

<div class="react-select-container">
  <div class="react-select__control">
    <div class="react-select__value-container">...</div>
    <div class="react-select__indicators">...</div>
  </div>
  <div class="react-select__menu">
    <div class="react-select__menu-list">
      <div class="react-select__option">...</div>
    </div>
  </div>
</div>

所以在你的 css 中，只需这样做：

.react-select-container {
  background-color: 'red';
}

.react-select__menu {
  height: 100vh;
}

等

【讨论】：

为什么你在 .react-select__menu 中使用了 height:100vh？
如果我按照你所说的那样做我的 CSS，它会自动进行反应选择，还是应该在 <Select> 标签中指定类名？ @Max
是的，就像示例中所说的那样，给它：className='react-select-container' and classNamePrefix="react-select"

【解决方案2】：

根据documentation

如果您将 className 属性提供给 react-select，则 SelectContainer 将根据提供的值获得一个类名。

所以它应该像这样工作：

<Select className="abc" .... />

然后你就可以像往常一样使用你的类名了。

.abc {
color: red;
}

你也可以使用classNamePrefix

通过指定一个 classNamePrefix，react-select 将呈现所有带有你的前缀的 className。如果你使用这个：

<Select className="abc" classNamePrefix="react-select" ... />

您的 Select 将自动呈现如下的类结构：

【讨论】：