如何隐藏React Semantic UI下拉菜单中的下拉图标

你可以通过两种简单方式移除Semantic UI React下拉菜单的默认图标：

方法一：使用组件内置属性（推荐） #

Semantic UI React的Dropdown组件支持通过icon={false}直接隐藏默认下拉图标，给所有需要移除图标的Dropdown添加该属性即可：

修改后的代码示例：

import React from 'react'
import { Dropdown, Menu } from 'semantic-ui-react'

const DropdownExamplePointing = () => (
  <Menu>
    <Menu.Item>Home</Menu.Item>
    {/* 主Dropdown添加icon={false} */}
    <Dropdown text='Shopping' pointing className='link item' icon={false}>
      <Dropdown.Menu>
        <Dropdown.Header>Categories</Dropdown.Header>
        <Dropdown.Item>
          {/* 子Dropdown添加icon={false} */}
          <Dropdown text='Clothing' icon={false}>
            <Dropdown.Menu>
              <Dropdown.Header>Mens</Dropdown.Header>
              <Dropdown.Item>Shirts</Dropdown.Item>
              <Dropdown.Item>Pants</Dropdown.Item>
              <Dropdown.Item>Jeans</Dropdown.Item>
              <Dropdown.Item>Shoes</Dropdown.Item>
              <Dropdown.Divider />
              <Dropdown.Header>Womens</Dropdown.Header>
              <Dropdown.Item>Dresses</Dropdown.Item>
              <Dropdown.Item>Shoes</Dropdown.Item>
              <Dropdown.Item>Bags</Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
        </Dropdown.Item>
        <Dropdown.Item>Home Goods</Dropdown.Item>
        <Dropdown.Item>Bedroom</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Header>Order</Dropdown.Header>
        <Dropdown.Item>Status</Dropdown.Item>
        <Dropdown.Item>Cancellations</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
    <Menu.Item>Forums</Menu.Item>
    <Menu.Item>Contact Us</Menu.Item>
  </Menu>
)

export default DropdownExamplePointing

方法二：自定义CSS隐藏图标 #

如果组件属性方式不满足需求，可通过CSS选择器直接隐藏图标元素：

/* 全局隐藏所有Dropdown的下拉图标 */
.ui.dropdown > .dropdown.icon {
  display: none;
}

/* 仅针对指定类名的Dropdown生效 */
.ui.link.item.dropdown > .dropdown.icon {
  display: none;
}

效果说明 #

修改前的原始效果：

修改后会移除目标Dropdown右侧的下拉箭头图标，菜单的展开/收起功能不受影响。根据官方文档说明，icon属性支持布尔值，设置为false即可禁用默认图标。

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