如何实现AntD Select标题及下拉项自动换行自适应高度并适配CSS Modules？

问题根源 #

CSS Modules会自动给类名添加哈希后缀（比如你写的_dropdown会变成_dropdown_xyz789），但AntD的下拉弹窗是挂载在body下的，不在当前组件的DOM结构里，哈希后的类名根本匹配不到弹窗元素；另外直接写AntD的内置类名也会被哈希化，无法覆盖原生样式。

具体解决方案 #

1. 正确结合popupClassName和:global #

在你的CSS Modules文件里，用:global()包裹弹窗的自定义类名，避免类名被哈希化：

/* 示例样式文件：SelectWrap.module.css */
:global(.custom-dropdown) {
  /* 可添加弹窗容器的基础样式 */
}

/* 给弹窗内的选项设置换行规则 */
:global(.custom-dropdown .ant-select-item-option-content) {
  white-space: break-spaces;
  word-break: break-word;
}

然后在Select组件中直接使用这个未哈希的类名：

<Select
  popupClassName="custom-dropdown"
  // 其他组件配置项
/>

2. 实现选中项的换行与高度自适应 #

针对选中项的容器和内容，同样用:global()覆盖AntD的默认样式：

/* 让选中项容器高度自适应 */
:global(.ant-select-show-search.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
  height: auto;
  min-height: 32px; /* 保留默认最小高度，避免内容过少时组件过扁 */
  padding-top: 4px;
  padding-bottom: 4px;
}

/* 让选中内容自动换行 */
:global(.ant-select-single.ant-select-show-arrow .ant-select-selection-item) {
  white-space: normal;
  word-break: break-all;
  align-self: flex-start; /* 让内容顶部对齐，避免垂直居中导致换行后间距异常 */
}

3. 优化技巧：避免滥用!important #

如果样式优先级不足，无需急着加!important，可以给选择器加上组件外层的CSS Modules类名来提升权重：

/* 假设组件外层有类名.select-wrap */
.select-wrap :global(.ant-select-selector) {
  height: auto;
}

内容的提问来源于stack exchange，提问作者GeorgeMet