Как убрать выделение с наведения пункта меню в Ant Design? - PullRequest
Новая
       46

Как убрать выделение с наведения пункта меню в Ant Design?

0 голосов
/ 07 февраля 2019

Как мне удалить onHover выделение из пункта меню и ?

Я сделал следующее: 

<Header className="header">
    <Menu mode="horizontal" style={{ lineHeight: "50px" }}>
        <Menu.Item key="1">
        <Title {...props} />
        </Menu.Item>
        <Menu.Item key="3">
        <FrequentItems {...props} />
        </Menu.Item>
        <Menu.Item key="2" style={{ float: "right" }}>
        <ProfileSettings {...props} />
        </Menu.Item>
    </Menu>
    {/* <Content>
        <Title {...props} />
    </Content> */}
</Header>

Элемент меню отображается, как и ожидалось, нопри наведении курсора на любой элемент меню он подчеркивается.Как можно избежать этого?

В настоящее время при наведении курсора это выглядит следующим образом:

enter image description here

При наведении появляется синяя линия.Я хочу, чтобы один из пунктов меню был статичным текстом.Не кликабелен и цвет не должен меняться при наведении.

1 Ответ

0 голосов
/ 07 февраля 2019

Если вы хотите, чтобы элемент не был кликабельным, статический текст без стиля при наведении - просто используйте опору disabled Menu.Item : 

<Menu.Item disabled>
    Disbaled
</Menu.Item>

Если вы хотите переопределить стили при наведении на все элементы, вам нужно объявить стили и применить их к Menu.Item:

Вы класс CSS: 

// ugly css hack
.modified-item:hover {
  border-bottom: 2px solid transparent !important;
  color: inherit !important;
}

И добавить, чтоas className prop: 

<Menu.Item className="modified-item">
    Modified
</Menu.Item>

Вот демонстрационная версия:

Edit 6zlnxp931n

Имейте в виду, Ant дизайн настоятельно рекомендует не делать этого :

Вы можете переопределить его стиль, но мы не рекомендуем этого делать.antd - это не только набор компонентов React, но и проектная спецификация.

...