Переопределить цвет элемента, выбранный Анттом

Question

Я хочу переопределить свойство background-color класса ant-menu-item-selected. По умолчанию это синий цвет.

import { Menu } from 'antd';
const { Item } = Menu;

//item2 will be rendered with the class 'ant-menu-item-selected'
const MyComp = () => (
  <Menu theme="dark" defaultSelectedKeys={["item2"]} mode="horizontal">
    <Item key="item1">Item 1</Item>
    <Item key="item2">Item 2</Item>
  </Menu>
);

ReactDOM.render(<MyComp />,document.getElementById('root'));

Как мне быть?

Спасибо за вашу помощь.

Answer 1

Если вы переопределяете стиль, используя файл меньшего размера, вы, скорее всего, захотите установить правильные первичные альтернативы, влияющие на цвет фона выделения:

@import "~antd/dist/antd.less";
@primary-color: #e42;
@primary-1: rgb(137, 41, 22);
@primary-2: rgb(118, 49, 35);
@primary-5: rgb(94, 51, 42);
@primary-6: #e42;
@primary-7: rgb(255, 120, 93);

Answer 2

Используя :global, мы можем переопределить детали и стили дизайна

div { // any parent element
  :global {
    .ant-menu-item-selected {
      border-bottom-color: #4a235a;
    }
  }
}

Answer 3

Я понял, что мне нужно переопределить свойства Ant Design с более высоким приоритетом.Сначала я определил класс CSS для каждого из моих Item элементов:

<Item key="item1" className="customclass">Item 1</Item>

Затем я добавил CSS:

.ant-menu.ant-menu-dark .ant-menu-item-selected.customclass {
  background-color: green; /*Overriden property*/
}

Первая часть перед customclassполучить тот же приоритет, что и свойства Ant Design.Класс customclass просто добавляет немного приоритета, необходимого для превосходства приоритета Ant Design.

Answer 4

Переопределенное свойство

:host ::ng-deep .ant-menu.ant-menu-light .ant-menu-item-selected {
  border-bottom-color: #4a235a;
}

Answer 5

В документации And-Design У вас есть опция с именем: style

Внутри вы можете положить все, что вы хотите, например style={{ backgroundColor: 'red' }}. Вы можете создать эффект hover также внутри атрибута стиля.

Как использовать атрибут style, если я не знаю, какие предметы ведьмы активны?

Очень просто, с React у вас есть управление состоянием, вы можете установить ключ наподобие isActive, когда элемент выбран, вы применяете стиль, какой хотите, и если это не так, вы ничего не применяете.

И для того, чтобы знать, что предметы ведьмы выбраны, у вас есть реквизит с Ant-D, который он назвал onSelect

Пожалуйста, проверьте эту ссылку: ANT DESIGN