Updating the underline style of ant.d's menu item

Currently, I am working with ant.design to build my navbar. By default, the menu items in ant design have a blue-ish underline when selected or hovered over. However, I want to change this underline color to match the overall design of my project. I was successful in changing the underline color for selected items by targeting a specific class:

&& .ant-menu-item-selected::after{
  border-bottom: 2px solid #659e38 !important;
}

Now, I also want to change the underline color when hovering over an item. But simply targeting the menu item like this:

  && .ant-menu-item:hover{
    border-bottom: 2px solid #659e38 !important;
  }

This approach gives me an undesired outcome depicted here: https://i.sstatic.net/xj1ne.png

How can I achieve the desired result? It's important to note that I'm using styled.components for styling.

cssreactjsantd

Answer №1

We found the solution by making the following change:


&& .ant-menu-item:hover{
    border-bottom: 2px solid #659e38 !important;
  }

Change it to:

&& .ant-menu-item:hover::after{
    border-bottom: 2px solid #659e38 !important;
  }

I believe this adjustment was necessary because the bars are created as pseudoelements by ant.d.

Answer №2

Below is the solution implemented with a styled component approach:

import { Menu as BaseMenu } from 'antd';

export const CustomMenu = styled(BaseMenu)`
  // custom styles
  .ant-menu-item-selected {
    border-bottom: 3px solid #ff5722 !important;
    color: #ff5722 !important;
  }

  & .ant-menu-item:hover {
    border-bottom: 3px solid #d9d9d9 !important;
    color: black !important;
  }

  // remove default blue border
  .ant-menu-item-selected::after {
    content: none;
    border-bottom: none !important;
  }

  & .ant-menu-item:hover::after {
    content: none;
    border-bottom: none !important;
  }
`;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to receive alerts when a marker enters a polygon

Looking for a way to receive notifications if my marker enters any of the polygons on the map. Having trouble implementing it correctly, here is my current code: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com ...

javascriptjqueryhtmlcssgoogle-maps

When you call setTimeout from a static function, it does not get executed

Having a problem with starting a timer in my utility typescript class. The static function initTimer() uses setTimeout but when called from a react component, the timer doesn't start. StyleWrapper.tsx const StyleWrapper: FC = (props) => { cons ...

javascriptreactjstypescript

What is the best approach for accessing values from dynamic or multiple form fields upon submission in React?

In my form, users have the ability to add Textfields in order to include additional items. However, I am facing a challenge when it comes to retrieving these items from the form upon submission. The Textfields are dynamically created by a component functi ...

javascriptreactjsformsmaterial-uijsx

Add a CSS and jQuery hover effect to display text over an image, requiring users to click twice on their mobile device

I have a bunch of panels for different categories that change the background image when hovered over, display some introductory text, and lead to a URL when clicked. However, on mobile devices, you need to tap the panel twice to activate the URL. What I&a ...

javascriptjqueryhtmlioscss

Configuring a React application within AWS Beanstalk with the help of environment variables

Is there a way to customize React application environment variables based on the Beanstalk environment it is deployed to? The objective is to compile React code with environment-specific variables only for that particular environment. The goal is to avoid ...

reactjsamazon-web-serviceswebpackamazon-elastic-beanstalk

Foundation: the importance of source order (without using flex grid)

I have a 3-column grid, with content and a sidebar. On small and medium devices each takes up 12 columns. Take a look at the example here: cdpn.io/anon/pen/bqENqG. I am looking to have the sidebar appear after the articles on small and medium devices like ...

htmlcsszurb-foundation

Appear and disappear gradually when hovering

When hovering over #one, the class .hidden is applied to #first. I have added a script to make .hidden fade out using transition: ease-in 0.3s;, but I am having trouble getting the fade in effect to work. I attempted adding transition: ease-in 0.3s; to #fi ...

jquerycss

Customizing the appearance of the browser's autocomplete feature as we input information into the form field

The image illustrates the issue of the background turning white when the browser autofills. However, I am seeking a solution similar to the transparent input below. ...

cssinputbackground

Utilize data retrieved from an API to customize the appearance of buttons through the combination of React and Sass styling techniques

I retrieved data from an API and used it to create a list of buttons. The data I received includes names and color codes. { name: "bob", colorCode: "#DC7472" }, { name: "ben", colorCode: "#69DCD1" }, { name: &q ...

javascriptcssreactjssass

I want to use React Bootstrap and Next.js to retrieve the text from a textbox in a React Component and then send it back to my Index.js file. How can I accomplish this task?

I need some assistance. Currently, I am facing a challenge. I am trying to retrieve data from one of my React Components named ParameterList. This component contains a React-Bootstrap Form.Control element for numerical input. My goal is to take the value ...

javascriptreactjsbootstrap-4next.jsreact-bootstrap

space required on the upper side of the cell

I have formatted a text (including title and paragraph) in a cell using CSS styles to achieve the desired appearance. The only thing left is to create some space between the top of the Title and the content below it. I attempted to use the margin parameter ...

htmlcsstagsmarginparagraph

Flexible DIVs with a maximum width of 50% that adjust to different

I'm having trouble getting these two DIVs to display properly within a parent DIV while maintaining responsiveness. I want them to each take up 50% of the screen with a 10px margin between them. Does my current code approach seem correct? .box-cont ...

htmlcss

Tips for showcasing a different value than the default renderValue in a Material UI select component

My dropdown menu is set up to display flags from 3 different countries, and I need to select one. However, the dropdown's behavior varies depending on the renderValue. There are 3 different cases: Case 1 renderValue={value => <img src={value.c ...

reactjsmaterial-ui

React components are failing to appear on a Laravel-mix react project that has been deployed on a shared hosting server

After successfully deploying a Laravel Mix React project on Hostinger shared hosting server, I encountered an issue where the react components inside the Laravel blade files were not displaying. Upon checking the network, it became evident that the server ...

reactjslaravel

Retrieve an image from a MongoDB database and display it in a ReactJS component

I am a beginner in mongodb and nodejs. I recently saved a post with text and an image to the mongodb database, but when trying to retrieve the information, the image is showing as undefined. This is the model for the post: const mongoose = require("mongoo ...

node.jsreactjsmongodbexpresslocalhost

clear the input field of any entered text type

Just starting out with Javascript! Below is some code: This code is taken directly from the HTML page <form action="#" id="ToolKeywordSearch"> <input type="text" class="ProductFinderText" id="ToolSearchField"onblur="if(this.value==& ...

javascripthtmlcssresponsive-design

Why does the flex-start and flex-end values correspond to the top and bottom positions when using the flex-direction property set

I am attempting to organize text and buttons into a row, with the buttons aligned on the right side and the text on the left side. My approach involves creating a flexbox layout and assigning items the appropriate classes for alignment. html, body { widt ...

htmlcssflexboxalignment

How can I create off-center underlined text?

I am looking to create a unique text effect where the underline is off-centered and overlaps the text. However, I am unsure of how to achieve this. Can someone guide me on the best way to replicate the following effect? Current Code: ...

htmlcssuser-interface

Customizing Images using a JSON array of images

Looking to implement a feature that displays images fetched from a CMS via a JSON file. The JSON data structure is as follows: { "images": [ {"title": "Image One", "url": "image1.jpg"}, {"title": "Image Two", "url": "image2.jpg"}, {"title": "Ima ...

javascriptjqueryhtmlcssjson

Creating a form that seamlessly integrates with the content using a combination

As I continue to explore the depths of WordPress and delve into learning HTML/CSS, my latest project involves embedding an email signup form on my website using Klaviyo. The basic code provided by their form creator initially had everything condensed into ...

htmlcssforms