更改“蚂蚁设计”中的箭头图标答案

【问题标题】：Change arrow icon in 'ant design'更改“蚂蚁设计”中的箭头图标
【发布时间】：2019-03-15 13:21:35
【问题描述】：

我创建了一个带有 ant 设计的子菜单的菜单，并且想要在没有重要样式的情况下更改展开的箭头图标

图片 1.

想要的图标 ->

<Menu
  onClick={this.handleClick}
  defaultSelectedKeys={['1']}
  mode="inline"                          
>
 <SubMenu title={<span>Home Page</span>}>
     <Menu.Item>1</Menu.Item>
     <Menu.Item>2</Menu.Item>
 </SubMenu>
</Menu>

【问题讨论】：

代码在哪里？您必须在问题中添加代码，否则没有人可以帮助您。
您好，您找到解决方案了吗？

标签： css sass antd

【解决方案1】：

不确定这是否为时已晚，但我看到一条评论询问是否找到了解决方案。如果您使用 Menu 组件的“expandIcon”参数，您可以将自己的自定义图标传递给 SubMenu 组件：

 <Menu
        expandIcon={<YourCustomIcon/>}
        selectedKeys={current}
        mode="inline"
    >
        <SubMenu style={{ width: 150 }} key="sub1">
            <Menu.Item key="1">Option 1</Menu.Item>
            <Menu.Item key="2">Option 2</Menu.Item>
            <Menu.Item key="3">Option 3</Menu.Item>
            <Menu.Item key="4">Option 4</Menu.Item>
        </SubMenu>
    </Menu>

【讨论】：

【解决方案2】：

把这段代码放在你的css文件中，放在antd css文件之后：

.ant-menu-submenu > .ant-menu-submenu-title .ant-menu-submenu-arrow::before {
  content: '';
  position: absolute;
  background: unset !important;
  background-image: unset !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid;
  border-width: 6px 0 6px 6px;
  border-color: #00d2be transparent transparent transparent;
  transition: transform 0.3s ease-in-out !important;
  transform: rotate(45deg) !important;
  border-radius: 0 !important;
  left: 0;
  top: 50%;
}

.ant-menu-submenu-open > .ant-menu-submenu-title .ant-menu-submenu-arrow::before {
  content: '';
  position: absolute;
  background: unset !important;
  background-image: unset !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid;
  border-width: 6px 0 6px 6px;
  border-color: #00d2be transparent transparent transparent;
  transition: transform 0.3s ease-in-out !important;
  transform: rotate(-45deg) !important;
  border-radius: 0 !important;
  left: 0;
  top: 50%;
}

.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::after,
.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::after {
  content: none !important;
}

【讨论】：