如何在React Quill中设置mention提及列表样式并添加滚动条

方案1：覆写默认CSS样式（最简实现） #

react-quill 的 mention 模块生成的提及下拉列表默认自带类名ql-mention-list，直接给该类添加高度限制和滚动属性即可生效：

.ql-mention-list {
  max-height: 300px; /* 可根据业务需求调整最大展示高度 */
  overflow-y: auto;
  overflow-x: hidden;
}

如果项目用了 CSS Modules、scoped 样式方案需要样式穿透，对应调整写法：

• scss/less 全局样式写法：

:global(.ql-mention-list) {
  max-height: 300px;
  overflow-y: auto;
}

• styled-components 写法：

const EditorWrapper = styled.div`
  .ql-mention-list {
    max-height: 300px;
    overflow-y: auto;
  }
`
// 将原有ReactQuill组件放在EditorWrapper容器内即可

方案2：自定义mention渲染容器（无全局样式污染） #

如果不想修改全局样式，可在你定义的mention配置项中指定自定义列表容器类，单独针对自定义类写样式：

const mention = {
  // 保留你原有mention配置（如触发字符、数据源匹配逻辑等）
  // 自定义列表渲染结构
  renderList: (suggestions, searchTerm) => {
    const items = suggestions.map(item => `<li class="mention-item">${item.label}</li>`).join('')
    return `<ul class="custom-mention-list">${items}</ul>`
  }
}

对应的自定义类样式：

.custom-mention-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  list-style: none;
}

注意事项 #

如果样式不生效，可打开浏览器控制台检查元素，确认提及列表的实际类名，避免拼写错误；如果设置了bounds属性限制弹出层范围，注意滚动条高度不要超过bounds容器高度，避免列表被截断。

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