css - 使用类样式化 react-select

Question

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

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

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

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

Answer 1

根据documentation

If you provide the className prop to react-select, the SelectContainer will be given a className based on the provided value.

所以它应该像这样工作:

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

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

.abc {
color: red;
}

您还可以使用 classNamePrefix

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

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

您的 Select 将自动呈现这样的类结构: