为react-multilevel-dropdown添加自定义样式并修复文本溢出问题

一、修复文本溢出问题 #

核心是调整子菜单容器的宽度控制与文本换行规则，可通过以下两种方式实现：

1. 全局CSS覆盖组件默认样式
   先通过浏览器开发者工具（F12）定位子菜单对应的类名（通常组件默认类名类似rmdd-submenu），然后添加CSS规则：

.rmdd-submenu {
  /* 设置最小宽度，确保容器能容纳文本 */
  min-width: 220px;
  /* 强制文本自动换行，避免溢出容器 */
  white-space: normal;
}

如果希望长文本显示省略号而非换行，可替换为以下规则：

.rmdd-submenu {
  min-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2. 通过组件props传递自定义类名
   若组件支持自定义类名属性（如subMenuClassName），直接给子菜单绑定自定义类：

<MultilevelDropdown
  subMenuClassName="custom-submenu"
  // 其他组件配置props
/>

再在CSS中编写自定义样式：

.custom-submenu {
  min-width: 240px;
  white-space: normal;
}

二、自定义组件文本样式 #

针对默认灰色文本等样式修改，同样通过CSS覆盖实现：

/* 修改子菜单文本默认颜色 */
.rmdd-submenu-item {
  color: #2d3748; /* 替换为你需要的颜色值 */
}

/* 可选：修改菜单选项hover状态样式 */
.rmdd-submenu-item:hover {
  background-color: #edf2f7;
  color: #1a202c;
}

三、特殊场景处理 #

如果项目使用CSS Modules，需要用:global()包裹选择器来突破模块化限制：

:global(.rmdd-submenu) {
  min-width: 220px;
  white-space: normal;
}

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