如何删除菜单下拉react-select中的顶部和底部填充？

要删除 react-select 组件中菜单下拉的顶部和底部填充，可以通过自定义 CSS 样式来实现。以下是具体的步骤和代码示例：

步骤

1. 安装 react-select（如果尚未安装）：
2. 安装 react-select（如果尚未安装）：
3. 自定义 CSS 样式： 创建一个 CSS 文件（例如 custom-select.css），并在其中添加以下样式：
4. 自定义 CSS 样式： 创建一个 CSS 文件（例如 custom-select.css），并在其中添加以下样式：
5. 在组件中引入并应用自定义样式： 在你的 React 组件文件中引入 react-select 和自定义的 CSS 文件，并确保应用了自定义样式。
6. 在组件中引入并应用自定义样式： 在你的 React 组件文件中引入 react-select 和自定义的 CSS 文件，并确保应用了自定义样式。

解释

• CSS 样式：
  • .react-select__menu：这是 react-select 组件中菜单下拉的默认类名。
  • padding-top: 0 !important; 和 padding-bottom: 0 !important;：通过设置 padding-top 和 padding-bottom 为 0，并使用 !important 来覆盖默认样式，从而删除顶部和底部的填充。

应用场景

这种自定义样式的方法适用于任何需要调整 react-select 组件外观的场景，特别是当你需要精确控制菜单下拉的填充时。

参考链接

• react-select 官方文档

通过以上步骤，你可以成功删除 react-select 组件中菜单下拉的顶部和底部填充。