Изменить значок стрелки в «Муравей дизайн» - PullRequest
Новая
       12

Изменить значок стрелки в «Муравей дизайн»

0 голосов
/ 15 марта 2019

Я создал меню с подменю с дизайном муравья и хочу изменить значок расширенной стрелки без важного стиля

Изображение 1. введите описание изображения здесь

Значок желания -> введите описание изображения здесь

https://ant.design/components/menu/

<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>

1 Ответ

0 голосов
/ 02 мая 2019

Поместите этот код в ваш 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;
}
...