多级下拉菜单 - React

Question

解决方案：
@the_previ 答案有效，但我需要更多 CSS 才能达到我想要的效果。这将是我的 CSS，它是通过 materialUI 的 makeStyles 添加的（它也可以是外部 CSS 文件）。

dropdownIcon: {
    background: "url(/images/down-chevron.png) no-repeat",
    backgroundSize: "20px",
    backgroundPosition: "left",
    paddingLeft: "30px",
  },

这将是结果：

我知道菜单，这是一个非常普遍的问题，但我找不到解决方法。我有一个组件，带有 lib react-multilevel-dropdown，它实际上完全符合我的要求。

<Dropdown position="right" title="Todos os departamentos">
      <Dropdown.Item>Item 1</Dropdown.Item>
      <Dropdown.Item>
        Item 2
        <Dropdown.Submenu position="right">
          <Dropdown.Item>Subitem 1</Dropdown.Item>
          <Dropdown.Item>Subitem 2</Dropdown.Item>
        </Dropdown.Submenu>
      </Dropdown.Item>
      <Dropdown.Item>Item 3</Dropdown.Item>
    </Dropdown>

这就是我现在的组件，我需要在标题的开头添加一个图标，标题属性只接受字符串。（这个库不是强制性的，任何功能都像它但带有图标的东西会很棒）

Answer 1

使用这个库的一个可能的解决方案是添加带有 CSS 的图标作为背景图像，如下所示：

.dropdown-main {
  background: url("your-icon.svg") no-repeat;
}

多级下拉菜单 - React

Multi Level Dropdown Menu - React

drop-down-menu

reactjs