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:

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

Achieve a gradient effect for the border color of MUI Checkbox

I'm currently working on customizing the appearance of a MuiCheckBox component by using styleOverrides. My goal is to create linear gradient borders for it. Any suggestions on how I can achieve this? MuiCheckbox: { styleOverrides: { root: { ...

reactjscheckboxmaterial-ui

The process of making an image fill an entire div using Html and CSS

What is the best way to make an image fill an entire div using Html and CSS? ...

htmlcssmobile-website

Implementing Custom Components in React MUI Table Cells

I'm currently utilizing MUI Table (not Data Grid) and facing a specific requirement. One column needs to display Images, while another should contain Action buttons. Despite my extensive search efforts, I have only come across examples using DataGrid ...

reactjsmaterial-ui

Stopping the infinite refresh issue in your React webpack application

Every time I modify the TS file, Webpack keeps refreshing the page without stopping. The console message reads: "@ebpack 5.66.0 compiled successfully" I've searched online and experimented with various plugins, but none of them seem to solve the issu ...

reactjstypescriptwebpack

``There Seems to be an Issue with Loading Content in Tabs

Hey! I'm encountering an issue with my jquery tabs. The first tab content loads fine, but when I select another tab, the content doesn't display. Then, when I try to go back to the first tab, it doesn't load either. Here's the HTML cod ...

javascriptjqueryhtmlcssajax

Error message "Potential Undefined Object" detected on a variable that is not an object in React with TypeScript

After finding and addressing the other 5-6 questions, I managed to partially fix it by using the "!" operator. Please do not remove this question for duplication purposes. However, what baffles me is that the variable is not recognized as an object. Here i ...

reactjstypescript

Prevent vertical scrolling only on mobile devices while allowing horizontal scrolling

Currently, I am working on a web page that utilizes a horizontal layout. However, when viewing the page on mobile devices, I want to restrict scrolling to only the horizontal direction, preventing users from being able to scroll up or down. As it stands n ...

jqueryhtmlcssscroll

The bootstrap 4 modal is not displaying the button as expected

I am currently working on an Angular 4 project and I am trying to implement a pop-up using Bootstrap 4. <div> <span class="text-center" id="span1">{{title}}</span> <button type="button" class="btn primary-btn" data-toggle="modal" data ...

csstwitter-bootstrapbootstrap-modalbootstrap-4

Exploring the effectiveness of React Hook Form using React Testing Library

My Component includes a form that, upon submission, utilizes Apollo's useLazyQuery to fetch data based on the form values. The form in the component is managed by React Hook Forms, with the handleSubmit controlled by RHF. <FormContainer onSubmit= ...

javascriptreactjsnext.jsgraphqlreact-testing-library

Exploring the world of animation with Jquery and images

I'm delving into the world of jQuery to create some captivating animations. Currently, I've been tasked with an assignment involving images that expand, contract, change opacity, and eventually hide. Below is my code snippet: function play_pic1 ...

jqueryhtmlcss

What is stopping this paragraph from being vertically centered with just one line?

After following instructions from another user, I successfully centered text vertically. However, I encountered difficulties when trying to center the entire content vertically. My attempt to enclose the text in its own div did not yield the desired result ...

csshtml

Experiencing a 404 ERROR while attempting to submit an API POST request for a Hubspot form within a Next.js application

Currently, I am in the process of developing a Hubspot email submission form using nextjs and typescript. However, I am encountering a couple of errors that I need help with. The first error pertains to my 'response' constant, which is declared b ...

javascriptreactjstypescriptnext.js

Setting the Anchor to a Popover in Material-UI: A Step-by-Step Guide

I am working with a Popover in Material-UI and I want to set the anchor permanently to a button, not just on click using event.currentTarget. Can this be achieved with typescript? The current examples in Material-UI use event.currentTarget which is causin ...

reactjsmaterial-uipopover

Tips for resizing the MUI DateCalendar component in a Reactjs application

I have the code to show a calendar using MUI DataCalendar. <LocalizationProvider dateAdapter={AdapterDayjs}> <DateCalendar/> </LocalizationProvider> I am looking for a way to make it larger in size. My attempt to achieve this was by ...

reactjsmaterial-uidatepicker

Issue encountered when trying to import 'vscode-languageserver' within a React application

I'm in the process of setting up a virtual playground using monaco-editor and vscode-languageserver to showcase the capabilities of my language server. However, when attempting to import 'vscode-languageserver' within a page like this examp ...

node.jsreactjslanguage-server-protocoldocusaurus

When the console.log(current) produces two identical values

When I attempt to use console.log( current), I see two identical values appear at the same time. Below is the complete code: useEffect(() => { const interval = setInterval(() => { const numberOfElements = Data.length; setCurrentInd ...

reactjsreact-hooks

"Encountering a 404 error during deployment with ExpressJS and React

My project functions correctly when run locally. To start it locally, I use the command npm run start in both the project root and client root simultaneously. I am currently developing a basic application with Express and Create React App. After successfu ...

node.jsreactjsexpressherokucreate-react-app

Encountering an issue with reading properties of undefined (specifically 'name') when implementing MUI DatePicker

Currently, I have implemented the MUI datepicker in this manner: import { DatePicker } from '@mui/x-date-pickers/DatePicker' <DatePicker label="Start Date" name="startDate" inputFormat="dd/MM/yyyy" render ...

reactjsmaterial-uireact-hook-formmui-x-date-picker

Encountering a 405 error when attempting to send a request through an express route in a Next

After deploying my Express js routes in Next js on hosting, I encountered an error 405 when sending requests to the route. However, everything works fine when I test it on localhost. I'm puzzled by this issue. Can anyone help me understand what' ...

javascriptreactjsexpresshttpnext.js

Handling the width and borders of CSS cells that are positioned outside of a table

Welcome! I recently created a simple gantt organizer as part of a demo. My goal was to make the main table scrollable while keeping certain columns "frozen" for easy visibility when navigating through the data. To achieve this, I followed some advice found ...

htmlcss