CODEWITHSUNDEEP
cssreactjsantd
JacopoStanchi
JacopoStanchi

Reputation: 2146

Override Antd's selected Item color

I want to override the background-color property of the ant-menu-item-selected class. By default it appears blue.

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'));

How should I do?

Thank you for your help.

Upvotes: 2

Views: 18301

Answers (7)

Abson
Abson

Reputation: 81

.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu:hover,
.ant-menu-horizontal > .ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-submenu-active,
.ant-menu-horizontal > .ant-menu-item-open,
.ant-menu-horizontal > .ant-menu-submenu-open,
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-submenu-selected {
  color: red;
  border-bottom: 2px solid red;
}

It's working for me!

Upvotes: 3

Force Bolt
Force Bolt

Reputation: 1221

By doing so much research I found that we can use the @emotion/styled package to override Antd's selected Item color(::: You can add @emotion/styled using command yarn add @emotion/styled or npm install @emotion/styled )

const CustomMenu = styled(Menu)`

&& .ant-menu-item-selected {

background-color: #000000;

} } `

Upvotes: 1

Martin Braun
Martin Braun

Reputation: 12639

If you are overriding the style using a less file, you most likely want to set the correct primary alternatives to affect the selection background color: 

@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);

Upvotes: 0

Shridhar Sagari
Shridhar Sagari

Reputation: 265

By using :global we can override detail ant design styles

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

Upvotes: 0

Meheret
Meheret

Reputation: 29

Overriden property

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

Upvotes: 0

JacopoStanchi
JacopoStanchi

Reputation: 2146

I figured out that I needed to override Ant Design's properties with a higher priority. First, I defined a CSS class on each of my Item elements:

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

Then I added the CSS:

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

The first part before customclass is there to get the same priority than the properties of Ant Design. The class customclass just adds the little bit of priority needed to surpass that of Ant Design.

Upvotes: 9

KolaCaine
KolaCaine

Reputation: 2187

On the documentation of And-Design You have an option called : style

Inside you can put all you want like style={{ backgroundColor: 'red' }} for example. You can make an hover effect also inside a style attribute.

How can use a style attribute if I don't know witch items are active ?

Very simple, with React you have a state management you could set a key like isActive when item is selected you apply style what you want and if it not true, you apply nothing.

And for knowing witch items are selected, you have a props with Ant-D his called onSelect

Please check this link : ANT DESIGN

Upvotes: 2

Related Questions