Personalize the hover effect and underline style of links in material-ui

Question

Personalize the hover effect and underline style of links in material-ui

I am currently delving into the world of material-ui custom styles and came across this helpful resource. However, I find myself a bit lost in how to properly override the classes using withStyles.

      <Breadcrumbs aria-label="breadcrumb" separator=" " className="menu">
        <Link color="inherit" href="/home">
          Home
        </Link>
      </Breadcrumbs>

In an attempt to solve this issue, I made changes to the global app.css file.

a:hover{
  border-bottom: 1px solid red
}

The result displayed was as follows:

Home
----
----  <- Upon hovering over the link, there are now two underlines present. The lower one is rendered in red.

My goal is to achieve the following:

Home
---- <- only displaying a single red underline upon hover

css reactjs material-ui

Answer 1

Answer №1

Instead of using CSS for styling, you can achieve the same effect by utilizing classes in your code:

button: {
    background-color: "#ff0000",
    "&:hover": {
        background-color: "#0000ff",
        border: "1px solid #0000ff"
    }
},

Answer 2

Instead of using CSS for styling, you can achieve the same effect by utilizing classes in your code:

button: {
    background-color: "#ff0000",
    "&:hover": {
        background-color: "#0000ff",
        border: "1px solid #0000ff"
    }
},

Answer 3

Answer №2

Implement a custom theme for Material UI by following the guidelines provided here.

To specifically address link hover underlining, use the code snippet below:

import { createTheme } from "@mui/material";

export const myTheme = createTheme({
  components: {
    MuiLink: {
      styleOverrides: {
        root: {
          textDecoration: "none",
          ":hover": {
            textDecoration: "underline",
          },
        },
      },
    },
  },
});

Answer 4

Implement a custom theme for Material UI by following the guidelines provided here.

To specifically address link hover underlining, use the code snippet below:

import { createTheme } from "@mui/material";

export const myTheme = createTheme({
  components: {
    MuiLink: {
      styleOverrides: {
        root: {
          textDecoration: "none",
          ":hover": {
            textDecoration: "underline",
          },
        },
      },
    },
  },
});

Answer 5

Answer №3

When it comes to a Link, which is essentially an <a> tag, the key property you should be focusing on overriding is text-decoration-color, not border-bottom. For more targeted styling, consider assigning a specific className to the Link and defining styles for that particular class.

Component:

  <Breadcrumbs aria-label="breadcrumb" separator=" " className="menu">
    <Link className="custom-link" to="/">
      Home
    </Link>
  </Breadcrumbs>

Style:

.custom-link:hover {
  color: red;
  text-decoration-color: red;
}

For a live demonstration, visit: https://codesandbox.io/s/cool-bush-wpn4m

Answer 6

When it comes to a Link, which is essentially an <a> tag, the key property you should be focusing on overriding is text-decoration-color, not border-bottom. For more targeted styling, consider assigning a specific className to the Link and defining styles for that particular class.

Component:

  <Breadcrumbs aria-label="breadcrumb" separator=" " className="menu">
    <Link className="custom-link" to="/">
      Home
    </Link>
  </Breadcrumbs>

Style:

.custom-link:hover {
  color: red;
  text-decoration-color: red;
}

For a live demonstration, visit: https://codesandbox.io/s/cool-bush-wpn4m

Answer 7

Answer №4

Another solution suggested in a previous response is to use this code:

a {  
  text-decoration-color: red;  
}

To make this work, there are two options available:

Define the styling for anchor tags in index.css and apply it globally across the entire web application as you have already done.
Alternatively, you can define the styles within the style object passed when using the withStyles HOC. For added control, consider wrapping the Link tag in a div and applying styles to that div. This way, the changes will be localized, and the Link tag will inherit the properties from its parent div.

Answer 8

Another solution suggested in a previous response is to use this code:

a {  
  text-decoration-color: red;  
}

To make this work, there are two options available:

Define the styling for anchor tags in index.css and apply it globally across the entire web application as you have already done.
Alternatively, you can define the styles within the style object passed when using the withStyles HOC. For added control, consider wrapping the Link tag in a div and applying styles to that div. This way, the changes will be localized, and the Link tag will inherit the properties from its parent div.

Answer 9

Answer №5

For those looking for a solution to customize the default properties of MuiLink without affecting global settings, consider the MUI approach of overriding props in your theme. Here is an example:

const customTheme = responsiveFontSizes(
  createTheme({
    components: {
      MuiLink: {
        defaultProps: {
          underline: "hover",
        },
        styleOverrides: {
          underlineHover: {
            "&:hover": {
              textDecorationColor: "red",
            },
          },
        },
      },
    },
  })
);

Answer 10

For those looking for a solution to customize the default properties of MuiLink without affecting global settings, consider the MUI approach of overriding props in your theme. Here is an example:

const customTheme = responsiveFontSizes(
  createTheme({
    components: {
      MuiLink: {
        defaultProps: {
          underline: "hover",
        },
        styleOverrides: {
          underlineHover: {
            "&:hover": {
              textDecorationColor: "red",
            },
          },
        },
      },
    },
  })
);

Personalize the hover effect and underline style of links in material-ui

Answer №1

Answer №2

Answer №3

Component:

Style:

Answer №4

Answer №5

Similar questions

Whenever I try to launch my React app using the `npm start` command in my command

Having trouble accessing the information submitted to the server

Adding click functionality to dynamically generated list items in jQuery and HTML

Is there a way to display two words side by side in React components?

Toggling the form's value to true upon displaying the popup

Using the -webkit-box-reflect property along with the CSS position:absolute styling

What are some ways to ensure text stands out against a gradient backdrop?

A React component featuring a nested map function should always include a "unique key" prop for each element

Is there a way to monitor network requests (for debugging purposes) in React Native specifically on a Windows platform?

Challenge with Adding Padding to Icon and Label

Enrollment in the course is conditional on two words being a perfect match

Having trouble getting CSS hover to work on hidden elements?

Setting the tab width in the Material UI App Bar

Obtain identical socket event in two separate useEffect hooks

IE8 is not properly handling nested HTML elements that have the display:none property set

Creating a vertical scrollable container that spans the full height of the PDF document

Conceal/reveal specific sections of a table cell using jQuery

Signal a return type error when the provided element label does not correspond with an existing entity

What is the best way to incorporate my Switch component into my Table component as a distinct column, while also maintaining separate states for each component?

Creating a redux store with an object using typescript: A step-by-step guide