Altering the style of the underline for a hyperlink

I'm looking to customize the underline style when hovering over a link. Specifically, I want to change the color and size of the underlined link.

  const useStyles = makeStyles(theme => ({
    button: {
    marginLeft: theme.spacing(2),
   },
  }));

 <MaterialLink
    component="button"
    aria-owns={anchorEl ? 'mouse-over-popover' : undefined}
    onMouseEnter={handlePopperOpen}
    onClick={handlePopperOpen}
    color="inherit"
 >
      <Typography variant="subtitle1" color="inherit" >Buisness Services</Typography>
 </MaterialLink>

Can someone provide guidance on how to achieve this customization for the underline effect on hover?

Example:https://i.stack.imgur.com/5HfdN.png

cssmaterial-ui

Answer №1

Exactly what I needed:

 const theme = createMuiTheme({
    overrides: {
        MuiLink: {
            button: {
                "&:hover": {
                    borderBottom: '2px solid #3F51B5'
                }
            },
        }
    }
});

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

Customizing error styles in a table using Jquery validation

My form is using JQuery .validation(). Here is the structure of my form: <form....> <table cellspacing="0" cellpadding="0"> <tr> <td>Name: </td> <td><input type='text' name='Name'/></td> ...

javascriptjqueryhtmlcss

Issue with MaterialUI and ReactJS: MobileDatePicker does not close after selecting a date

After implementing closeOnSelect for selecting a date, I am encountering an issue where the date picker remains open even after selection. The only way to make it disappear is by either escaping or clicking the OK or Cancel buttons. This issue occurs on bo ...

reactjsmaterial-ui

Differentiating CSS translate in front versus behind another div

I'm having some trouble translating an SVG graphic in the y-axis using CSS transforms. The translation itself is working fine: transform: translate3d(0, -100px, 0); However, when I move the graphic 100px up in the Y direction, it ends up behind its ...

htmlcsssvgtransform

How can one incorporate additional color options into Material-UI beyond just Primary and Secondary?

I've searched high and low, combed through documentation, scoured YouTube for tutorials, and Googled endlessly with no luck. It feels like this might be beyond the capabilities of MUI, but it's becoming quite frustrating. All I want is a clean a ...

material-ui

Is the textarea's shape out of the ordinary?

Most textareas are typically rectangular or square in shape, similar to this: However, I am interested in having a custom-shaped textarea, like the example below: Is it feasible to achieve? ...

javascriptjqueryhtmlcss

How about this: "Leveraging the power of #IEroot to achieve a

Has anyone successfully implemented the IE CSS hack #IEroot? I came across it while reading this informative article, but unfortunately, it doesn't seem to be working for me. I'm currently trying to resolve an inline styling bug in order to achi ...

cssinternet-explorer

Struggling to locate the correct path for the CSS file in Express and Handlebars

As part of a student exercise, I am attempting to access an API containing information about presidents and style them using CSS. However, I am facing issues with linking the style.css file. I have tried various methods to change the path and public path ...

cssnode.jsexpress

Attempting to extract the text within a table row cell by clicking on the cell directly following it

I am trying to extract the data from a table row when I click on a specific div within that row HTML: <td class="ms-cellstyle ms-vb2">10</td> <td class="ms-cellstyle ms-vb2"> <div class="ms-chkmark-container"> <div ...

javascriptjqueryhtmlcsstraversal

Turn a textfield on and off in real-time

Hey everyone, I've been working on making a textfield dynamic and I wanted to share my code with you: <input type="text" id="test1" value ="dynamic" onfocus="this.disabled=true" onblur="this.disabled=false"> <input type="text" id="test2 ...

javascriptjqueryhtmlcssonfocus

Troubleshooting: Why is Angular2 ngClass malfunctioning?

I am having trouble adding a class based on a condition <tr *ngFor="let time of times; let i = index"> <td [ngClass]="{'red-time':checkInvalid(time['Proles Arrive'])}">{{time['Proles Arrive']}}</td& ...

htmlcssangular

Arrange a div within a list element to create a grid-like structure

My current structure is as follows: <ul class="wrap-accordionblk"> <li class="accordionblk-item"> <div class="accordionblk-header"> <div class="row-fluid"> <div class="infoblk"> <label>SESSION ID ...

htmlcssalignment

Unique design Radio Button Inputs with Custom CSS Styling and Enhanced Accessibility for Voice Controls

On my website, I have implemented custom radio buttons using this model: The custom radio buttons are working well with various browsers and are accessible with Jaws. However, I encountered an issue when trying to use Voice Over as the radio button canno ...

jquerycssradio-buttonaccessibilityvoiceover

Creating an Interactive Menu System with Nested Options in Angular 2

I have a JSON structure that I need to transform into a menu with sub-menus based on the value of the sub-menu_location field. Here's an example: { "data": [ { "menu_name": "Primary Operations", "enabled": true, "sub-menu_lo ...

javascripthtmlcssangular

What is the best way to modify the text color within a Navbar, especially when the Navbar is displayed within a separate component?

First question on StackOverflow. I have a Next App and the Navbar is being imported in the _app.js file. import Navbar from "../Components/Navbar"; function MyApp({ Component, pageProps }) { return ( <> <Navbar /> ...

javascripthtmlcssreactjsnext.js

The images on my website are not displaying properly on different devices

My attempt at creating a website for fun and testing purposes is facing issues when viewed on mobile devices. The images and specially positioned elements are not displaying correctly, extending beyond the page boundaries. I have tried adding the viewport ...

htmlcssimagepositioncross-browser

Beginning of my initial endeavor (seeking feedback, general advice, criticism)

Hey everyone! I'm looking for a forum-style platform similar to Stack Overflow where I can get some feedback on my first project. It's the first one I've built from scratch, so I'm open to any critiques or suggestions on what could be i ...

htmlcssflexboxmedia-queries

I am having issues with the external CSS and JS files not functioning properly in my project

I'm currently working on a project that has the following file structure: However, I am facing issues with loading my CSS and JS files... <link rel="stylesheet" href="./css/main.css"> <script src="./js/main.js" ...

javascriptphpcssurlserver

Transitioning classes in Vue elements

Is it achievable to create a smooth transition between two CSS classes with different background images? That's the challenge I'm currently facing. Here is the Vue code snippet I am working on: <div id="flip-list-demo" class="demo"> & ...

javascriptcssvue.jstransition

Ensure consistent element heights within adjacent columns using CSS

My template looks like this: I am trying to keep the same height between each item in both columns, where the height is determined by the tallest item in each column when they are placed side by side. But on smaller screens with a width of 100%, I want ea ...

htmlcssflexbox

What could be causing the black screen to appear when utilizing BlocBuilder, despite having implemented all precautions?

In my main file, I am implementing code to check for internet connection and display a dialog using flutter cubit if there is no internet connection. However, I am facing an issue where the screen flickers black for a split second before displaying the di ...

fluttermaterial-uiflutter-bloc