Material React 中 select 选项中的设计和 Ionicons

Question

如何在 select 下拉菜单中添加图标？

我的代码是：

import React, { Component } from 'react';

import Icon from '@mdi/react'
import { mdiFormatAlignLeft } from '@mdi/js';
import { mdiCheckboxMarked } from '@mdi/js';
import { IoMdRadioButtonOn } from 'react-icons/io';

class AddNewQuestion extends Component {

  render() {
    return (
        <div>
          <select>
            <option value='multiple'><Icon path={mdiCheckboxMarked} /> Multiple choice</option>
            <option value='single'><IoMdRadioButtonOn /> Single choice</option>
            <option value='open'><Icon path={mdiFormatAlignLeft} /> Open question</option>
          </select>
        </div>

    )
  }
}

我得到的不是图标，而是 [object Object]。

我尝试将 MD 图标作为网络字体，如下所述：https://dev.materialdesignicons.com/getting-started/webfont 但我也得到了 [object Object]。

有什么想法吗？

Answer 1

<select> 和 <option> 是本机 UI 元素，因此您会受到用户操作系统呈现它们的方式的限制。 <option> 元素只能包含文本字符串，不能包含 HTML 或 React 节点。

您正在寻找的是类似 Material UI Select Component 的东西，它创建自己的 DOM 元素来模拟使用 <select> 的体验，让您能够设置样式它，将图标元素添加到下拉选项等

Material React 中 select 选项中的设计和 Ionicons

Material Design and Ionicons in select option in React

html-select

reactjs

ionicons

react-icons

material-design-icons