Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Link component adds additional class with custom styles without any reason

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

Link component adds a class named css-XXXXXXX-MuiTypography-root-MuiLink-root to “a” tag with custom styles, this breaks all my markup because it has “margin: 0” rule and it always comes last and rewrites all other styles. The documentation doesn’t mention this behavior.

<a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1iwtne7-MuiTypography-root-MuiLink-root" href="/">Link</a>

Expected behavior 🤔

A tag without additional class

<a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways" href="/">Link</a>

Steps to reproduce 🕹

Steps:

Create new project
Add Link component

https://codesandbox.io/s/react-mui-forked-0sewm

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri)
  Binaries:
    Node: 16.13.1 - /usr/bin/node
    Yarn: 1.22.15 - /usr/bin/yarn
    npm: 8.1.2 - /usr/bin/npm
  Browsers:
    Chrome: 96.0.4664.93
    Firefox: 94.0
  npmPackages:
    @emotion/react: ^11.7.0 => 11.7.0 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.59 
    @mui/material: ^5.2.3 => 5.2.3 
    @mui/private-theming:  5.2.3 
    @mui/styled-engine:  5.2.0 
    @mui/system:  5.2.3 
    @mui/types:  7.1.0 
    @mui/utils:  5.2.3 
    @types/react: ^17.0.0 => 17.0.37 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.1.2 => 4.5.3

Issue Analytics

State:
Created 2 years ago
Comments:15 (9 by maintainers)

Top GitHub Comments

1reaction

mnajdovacommented, Mar 3, 2022

Alright, fair enough, cc @michaldudak @siriwatknp I am adding this to the v6 milestone so that we can make a decision on this going forward.

1reaction

montogeekcommented, Feb 14, 2022

@mnajdova To keep the HTML clean

Top Results From Across the Web

Adding Custom Styles to Material UI Components | React.school

Material UI makes it easy to add custom CSS to any element inside any component. They have many guides on this covering the...

Lesson 1: Understanding ID and Class in CSS

Lesson 1: Understanding ID and Class in CSS. Overview. So far you have added style to various elements in your portfolio page, but...

React Router Appears to Block Custom CSS - Stack Overflow

I am using React Router ('react-router-dom') to handle routing and React Bootstrap to create my navbar. To apply the custom background color, I ......

How to style your React-Router links using styled-components

Now the thing is you cannot directly style the Link using styled components this way. Why ? Because under the hood, Link is...

Styling links - Learn web development | MDN

The final article in our Styling text module details how to use custom ... without adding another method of indicating the focused link....