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

Are there any real-world examples you can share of utilizing CSS 3D Transforms?

The changes made in the CSS file are not reflected in the browser

When a row is clicked, retrieve the data specific to that row

Reacting - page is not refreshing

Is there a way to extract the text from the inner div of an element using nightwatch.js?

What is the best way to ensure that circles only touch each other by their edges?

Best practices for organizing and storing a todo list in ReactJS using local storage

Tips on preventing users from navigating backwards in a React Redux application

What are the benefits of removing event listeners in Reactjs?

What is the best way to restrict the selection of specific days of the week on an HTML form date input using a combination of JavaScript, React, and HTML?

Having trouble loading series data after fetching API with React and Redux-Thunk

Parent whose height is less than that of the child element

PHP/CSS: Backgrounds for DIVs have been implemented, but they appear to be transparent

Effortlessly implement CSS styling in a scoped shadow element with Vue3

Importing CSS properties from MUI v5 - A comprehensive guide

I possess an array of objects that includes both images and documents. My goal is to examine the mime_type of each object and select the first element in React to be displayed within an <img> tag

Tidying up following the execution of an asynchronous function in useEffect

Every time a button is clicked on the interface, a new element or button will appear. This functionality is made possible through

Whenever I attempt to run 'npx create-react-app', it keeps throwing an error saying 'UNABLE_TO_GET_ISSUER_CERT_LOCALLY'

HTML set hover & active states to remain active indefinitely