Ways to eliminate the default underline in MUI typography

I have a unique Moviecard component in my React app that I built with MUI. It has this persistent and bothersome underline on every Typography component, and no matter what I try, like setting textDecoration to none, it just won't go away.

There seems to be no logical explanation for this underline, and I've thoroughly checked the Typography API without any success. Below is the return statement along with a snapshot of the Moviecard component displaying the issue:

return (
    <Box
      sx={{
        m: 2,
        width: 200,
        height: 300,
        borderRadius: "15px",
        overflow: "hidden",
        cursor: "pointer",
        scale: 1.05,
        transition: { duration: 0.3 },
        boxShadow: 3,
        bgcolor: "background.paper",
        border: "1px solid lightgrey",
      }}
      layout
    >
      <Link
        to={`/moviedetail/${movie.id}`}
        sx={{
          textDecoration: "none",
          height: "100%",
          width: "100%",
          position: "absolute",
          zIndex: 10,
        }}
        aria-label="See comprehensive details about the selected movie."
      >
        <Card sx={{ width: "100%", height: "100%" }}>
          <CardContent
            sx={{
              height: "20px",
              width: "100%",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              zIndex: 20,
              backgroundColor: "rgba(0,0,0,0.7)",
              borderBottom: "1px solid lightgrey",
            }}
          >
            <Typography
              sx={{
                textDecoration: "none",
                letterSpacing: "1px",
                fontSize: "2xl",
                fontWeight: "bold",
                color: "lightgrey",
                wordBreak: "break-word",
              }}
              noWrap
            >
              {movieTitle}
            </Typography>
            <Typography
              sx={{
                p: 1,
                mr: 4,
                backgroundColor: (theme) =>
                  (movie.vote_average || 0) > 7
                    ? theme.palette.success.main
                    : (movie.vote_average || 0) > 5
                      ? theme.palette.warning.main
                      : theme.palette.error.main,
                borderRadius: "50%",
                fontWeight: "bold",
              }}
            >
              {(movie.vote_average || 0).toFixed(1)}
            </Typography>
          </CardContent>
          <CardMedia
            component="img"
            height="100%"
            image={
              movie.poster_path
                ? `https://image.tmdb.org/t/p/w500/${movie.poster_path}`
                : noimage
            }
            alt={movie.title}
            loading="lazy"
            sx={{
              filter: "blur(5px)",
              "&.loaded": {
                filter: "blur(0)",
                transition: "filter 0.3s",
              },
            }}
            onLoad={(e) => e.target.classList.add("loaded")}
            fallback={
              <Skeleton variant="rectangular" width="100%" height="100%" />
            }
          />
        </Card>
      </Link>
    </Box>
  );

https://i.sstatic.net/BVjWh.png

Answer №1

It seems like the problem stemmed from the Link element enclosing the code, causing it to underline its contents and ignore any internal CSS attempts to remove the underline. To resolve this issue, I included the following snippet in my universal CSS stylesheet:

* {
    text-decoration: none;
}

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

Ways to switch sidebar menu using only CSS?

How do I create a BS4 sidebar menu that toggles on click and replaces an icon? See the code below: .toggle { display: none; } .menu-head label { color: black; cursor: pointer; } .container { overflow: hidden; display: inline-block; } .si ...

One crucial factor to consider when dealing with dual screen setups is the

Imagine you have the following code snippet : <ul> <li>Menu1 <ul class="submenu"> <li class="firstmenu">submenu-1</li> <li>submenu-2</li> < ...

Creating a Burger Navigation Menu with CSS and HTML using Image Overlapping

I'm encountering an issue with the new website I created for my local Church. I followed a tutorial on building a burger menu using just HTML and CSS, which you can view here. The problem arises when I attempt to place an image below the navigation m ...

Creating a Background Image Using CSS3: A Step-by-Step Guide

Hey there! I'm trying to figure out how to recreate the image attached using CSS3. I've tried a few online tools for generating gradients, but no luck so far. :( I have the original image, but I really want to create the background using CSS3 in ...

Reactstrap: Keep drop down menu open after an item is selected

In a DropdownItem, there is a search Input that should stay open when clicked to allow the user to type in their search query: import React, { Component } from "react"; import { connect } from "react-redux"; import { Dropdown, Dropd ...

Troubleshooting a connection issue between Laravel and Next.js when calling axios

My current setup involves using Laravel for the backend and NextJs for the frontend. When I attempt to submit the form, I encounter an issue. The server responds with the following error message: error I have verified that the csrf token is correctly obt ...

The CSS code designed to limit the display to only a two-line sentence is failing to work properly in Internet Explorer

I've implemented the following CSS code to ensure that the display sentence doesn't exceed 2 lines, with the remaining text being replaced by "...". .bell-notification-max-words-display { overflow: hidden; display: -webkit-box; ...

What is the method for adding a prefix to every line in JavaScript?

I'm currently working on a React project and dealing with a string that may contain newlines. I'm looking for the most efficient way to inject a symbol at the start of each line. I've considered exploding the string into an array and adding ...

Click on link after animation has finished

I'm currently facing an issue with my script not functioning correctly. The code I'm utilizing is from a resource provided by Codyhouse to implement a 3D rotating navigation menu on my webpage. Essentially, when you click the hamburger icon, it o ...

What are the pros and cons of incorporating ID selectors in CSS?

This article discusses the drawbacks of utilizing ID selectors in CSS. Can you provide more information on the pros and cons of using ID selectors in CSS? In what scenarios should ID selectors be used over class selectors, and vice versa? Thank you. ...

The issue persists with Angular's overflow hidden not functioning properly, and similarly, the show password button is

I created a login page using Angular Material, but I'm facing some issues. The problem is that when I set the style overflow: hidden, the show password button stops working. Additionally, if I click the button twice, the webpage refreshes, which shoul ...

JavaScript- Tabbed Navigation with Lists as the Content

Currently, I am facing a frustrating issue in finding a suitable solution. My website uses tabs that utilize the UL, LI system, similar to most tab systems found in tutorials. The problem arises because the javascript on my site interferes with using the ...

Validation with React Hooks does not function properly when used on a controlled component

I've recently started using react hook form and I've created a custom component based on material ui's autocomplete. The issue I'm facing is that react hook form isn't validating the field at all. Let me show you how the setup look ...

Navigating to the left while implementing right-to-left formatting on a single webpage

I'm currently working on a website and I decided to make it right-to-left (RTL). Everything looks good on the website, except for one specific page. I'm experiencing some difficulties in implementing RTL on this particular page. Although the ot ...

What is the best way to validate multiple checkboxes in React Native Elements?

Just starting out with React Native, I'm working on creating a quiz app that includes multiple choice questions. I'm using the "react-native-elements" library to generate checkboxes for the choices. However, I'm struggling with figuring out ...

Adjustable image within a div based on the length of the title when viewed in Edge browser

I am facing an issue with a div element. Here is the code snippet: <div fxLayout="column" fxLayoutGap="20px"> <h1 class="mat-display-1">Welcome to $TITLE$</h1> <img *ngIf="logoData" [src]="logoData" class="logo" alt="logo"/> &l ...

What is the best way to organize table rows into a single column when the window is resized?

I am working on a table that has three pictures in a row, with 100% width. I want the table to be responsive and stack the pictures into one column when the space is limited. The issue I am currently facing is that the elements of the table do not stack i ...

The current enablement status does not support the experimental syntax 'flow' (7:8):

Utilizing a Mono repo to share react native components with a react app has presented some challenges. When attempting to use a react native component from react, an error keeps popping up that I can't seem to resolve. I've attempted to follow t ...

Tips for personalizing the MUI Autocomplete filter using createFilterOptions

I am currently exploring the Autocomplete MUI component and trying to understand its functionalities. Initially, my basic implementation worked smoothly as expected with the provided code: import Autocomplete from '@mui/material/Autocomplete'; im ...

Why is my CSS Grid still not working correctly even though validation services have confirmed it is 100% correct?

After running my HTML and CSS through the validation services, everything seemed to check out fine. However, when I try to implement the grid layout using the CSS below, it doesn't seem to work as expected: body { display: grid; grid-template ...