如何为react-dropdown的dropdown-option添加自定义类名？

要给react-dropdown的下拉选项添加自定义类名，你需要手动渲染Option组件，而非直接传入字符串/对象数组。具体修改步骤如下：

1. 将reporTypes数组转换为包含自定义Option组件的列表，通过className属性指定自定义类名：

const customOptions = reporTypes.map(type => (
  <Option key={type.value} value={type.value} className="mh-dropdown-option">
    {type.label}
  </Option>
));

注：若你的reporTypes元素是纯字符串而非对象，将type.value和type.label替换为type即可。

2. 修改Dropdown组件的options属性，传入上述生成的customOptions：

<Dropdown
  onChange={handleTypeChange}
  options={customOptions}
  value={selectedType}
  className='mh-select-container'
  controlClassName='mh-dropdown mh-dropdown-rounded'
  menuClassName='mh-dropdown-content'
/>

3. 在App.css中添加自定义类名的样式：

.mh-dropdown-option {
  /* 自定义样式示例 */
  padding: 8px 12px;
  color: #333;
}

.mh-dropdown-option:hover {
  background-color: #f5f5f5;
}

完成以上修改后，每个下拉选项都会带上你指定的自定义类名，方便后续样式定制。

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