使用类样式反应选择

Question

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

我想使用 classNames 设置下拉菜单的样式，以便我引用https://react-select.com/styles。react slect的DOM结构见链接。

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

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

Answer 1

根据文档

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

所以它应该像这样工作：

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

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

.abc {
color: red;
}

您还可以使用 classNamePrefix

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

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

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

Answer 2

看看他们的例子：

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

ETC