Halt the Changing of Button and Typography Styles with React Router and MUI

Question

Halt the Changing of Button and Typography Styles with React Router and MUI

I am currently working on a component that I want to make clickable. However, when I wrap them in a <Link> element (from react-router-dom) or set component={Link} to="" on them, all the text inside them automatically becomes hyperlinks. For example:

https://i.stack.imgur.com/JKUsK.png

In the image above, there are four buttons, with the last three being wrapped in <Link> tags. I do not want the styling of those buttons to change. While I understand that I can remove the underline and other styles using CSS, it seems cumbersome to have to do it for everything inside the link tag.

This issue also arises when I add component={Link} to="" to a container that contains images, Typography, and other elements - causing all text to become hyperlinked as well.

Could you please advise on how to prevent everything inside a Link from being styled as a hyperlink?

css reactjs material-ui

Answer 1

Answer №1

When it comes to customizing your site, there are a couple of approaches you can take. For guidance, you can look at MUI: How to customize.

If you want to change the appearance of all Link components on your site, you can use a theme override like this:

const theme = createTheme({
  overrides: {
    MuiLink: {
      root: {
        // ...
      },
    }
  }
});

If you only need certain sections to have different-looking links, you could create a reusable component with custom styles. Here's an example:

import * as React from 'react';
import Link, { LinkProps } from '@mui/material/Link';
import { styled } from '@mui/material/styles';

const SimpleLink = styled(Link)<LinkProps>(({ theme }) => ({
  textDecoration: 'none'
}));

export default function StyledCustomization(url: string) {
  return <SimpleLink url={url} />;
}

Answer 2

When it comes to customizing your site, there are a couple of approaches you can take. For guidance, you can look at MUI: How to customize.

If you want to change the appearance of all Link components on your site, you can use a theme override like this:

const theme = createTheme({
  overrides: {
    MuiLink: {
      root: {
        // ...
      },
    }
  }
});

If you only need certain sections to have different-looking links, you could create a reusable component with custom styles. Here's an example:

import * as React from 'react';
import Link, { LinkProps } from '@mui/material/Link';
import { styled } from '@mui/material/styles';

const SimpleLink = styled(Link)<LinkProps>(({ theme }) => ({
  textDecoration: 'none'
}));

export default function StyledCustomization(url: string) {
  return <SimpleLink url={url} />;
}

Halt the Changing of Button and Typography Styles with React Router and MUI

Answer №1

Similar questions

"Troubles with directing on websites using jQuery, CSS,

Achieving text center alignment and adding color to text within a header using Bootstrap

The argument type 'MouseEvent<HTMLButtonElement, MouseEvent>' cannot be assigned to the parameter type 'HTMLElementEvent<HTMLButton>'

Manipulate only the elements inside the designated container

Using React components with inline styling

Exploring alternative color palettes outside of the traditional primary, secondary, and error schemes

What is the best way to retrieve certain items from an array that has been converted into table rows using React?

Tips for creating a test to choose a movie from the MuiAutocomplete-root interface

Utilizing environment variables in index.html with Create React App

Create custom components by wrapping npm components and exporting them as a single custom component

Difficulty accessing `evt.target.value` with `RaisedButton` in ReactJS Material UI

When writing CSS, ensure there is no space between selectors and classes of elements

Achieving a smooth transition from a blur-out effect to a blur-in effect on a background Div

Extremely efficient CSS utility classes for supreme performance

Introducing a new div element completely disrupts the overall layout

The React front-end struggles to display MongoDB entries and eventually times out after 10 seconds

Managing CSRF tokens in React Relay: best practices

Using Conditional Tags for CSS Display

What is the best way to close a popup window?

Whenever I add a new Task in React.js, the date is not visible to me